0

我无法为我的绝对定位元素提供 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#primary100% 的高度，但这不是页面高度，而是屏幕高度。

看这张图片： 安卓图片

我希望背景是页面的全高，而不是屏幕（所以它覆盖了整个nav#primary）

4

5 回答 5

2

将此添加到您的 CSS

nav#primary {
    overflow: auto;
}
于 2013-08-12T08:51:36.793 回答
1

除非nav#primary包含页面上的所有其他内容，否则不能将其设置为height: 100%. 您是否考虑过在body元素上使用背景图像？您可以强制图像用类似background-size: cover;.

于 2013-08-12T08:58:23.147 回答
1 
nav#primary {
background-image:url(../images/onlinekhabar.jpg);
        background-size:100% 100%;
}
于 2013-08-12T09:02:34.223 回答
0

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

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

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

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

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

-50 是为了移除我的顶栏高度。

结果：

移动的：

安卓

药片：

药片

于 2013-08-12T09:29:37.290 回答
0

这是因为您在身体上设置了相对位置。尝试用容器包装你的导航标签并给出相对位置。

像这样的东西。

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;
}
于 2013-08-12T20:53:57.097 回答