Question

我无法将绝对定位元素赋予100％的高度，因此它覆盖整个页面而不仅仅是屏幕高度。

我正在使用LESS，这是我到目前为止所做的：

html, body {
    height: 100%;
    position: relative;
}

div#top-bar {
    background: #333;
    height: 50px;
    width: 100%;
}

nav#primary {
    background: #333;
    bottom: 0;
    min-height: 100%;
    left: -100%;
    padding-top: 50px;
    position: absolute;
    top: 0;
    width: 100%;
}

这样我的nav#primary高度为100％，但这不是页面高度，而是屏幕高度。

看到这张图片： Android image

我希望背景是页面的完整高度，而不是屏幕（因此它涵盖了整个nav#primary）

Answer 1

将此添加到您的CSS

nav#primary {
    overflow: auto;
}

Answer 2

除非nav#primary包含网页上的所有其他内容，否则您无法将其设置为height: 100%。您是否考虑在body元素上使用背景图片？您可以强制图像填充屏幕，例如background-size: cover;。

Answer 3

nav#primary {
background-image:url(../images/onlinekhabar.jpg);
        background-size:100% 100%;
}

Answer 4

首先，非常感谢你的帮助，如果没有你们，我不会这样做。

我设法以某种方式让这个工作，我的第一步是从nav#primary删除绝对定位并使用margin-left而不是left选项。我还需要向左浮动并显示内联。

对于我的内容div#main我还需要向左浮动并显示内联。这是我的移动第一次接近position:absolute的地方（所以我的导航可以覆盖它）。我的小媒体查询(min-height: 768px)，将位置设置回默认值（静态）。

在我的jQuery中，我需要添加此代码以根据窗口高度更改min-height。 （注意：最小高度不是高度）

menu.css('minHeight', (jQuery(window).height() - 50) + 'px');

-50是删除我的topbar高度。

结果：

移动：

Android

片剂：

Tablet

Answer 5

这是因为你设定了身体的相对位置。尝试使用容器包装nav标签并给出相对位置。

像这样。

HTML：

<body>
    <header id="topbar"></header>
    <section id="container">
        <nav id="primary"></nav>
    </section>
</body>

CSS：

html, body {
    height: 100%;
}

header#top-bar {
    background: #333;
    height: 50px;
    width: 100%;
}

section#container {
    padding-top: 50px;
    position: relative;
    min-height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: #333;
}

nav#primary {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

绝对位置背景100％的页面高度

5 个答案: