Css 绝对位置背景100%页面高度_Css_Html_Absolute

Css 绝对位置背景100%页面高度

css html

Css 绝对位置背景100%页面高度,css,html,absolute,Css,Html,Absolute,我很难给我的绝对定位元素一个100%的高度，这样它就可以覆盖整个页面，而不仅仅是屏幕高度我使用的更少，这就是我目前所拥有的： html, body { height: 100%; position: relative; } div#top-bar { background: #333; height: 50px; width: 100%; } nav#primary { background: #333; bottom: 0;

我很难给我的绝对定位元素一个100%的高度，这样它就可以覆盖整个页面，而不仅仅是屏幕高度

我使用的更少，这就是我目前所拥有的：

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%;
}

这给了我一个100%的

nav#primary

高度，但这不是页面高度，而是屏幕高度

请参见此图：

我希望背景是页面的整个高度，而不是屏幕（因此它覆盖了整个

nav#primary

）

将此添加到CSS中

nav#primary {
    overflow: auto;
}

将此添加到CSS中

nav#primary {
    overflow: auto;
}

除非

nav#primary

包含页面上的所有其他内容，否则不能将其设置为

height:100%

。您是否考虑过在

主体

元素上使用背景图像？您可以强制图像用

背景大小：cover

除非

nav#primary

包含页面上的所有其他内容，否则无法将其设置为

高度：100%

。您是否考虑过在

主体

元素上使用背景图像？您可以强制图像用

背景大小：cover
首先，非常感谢你们的帮助，没有你们，我是不会这么做的
nav#primary {
background-image:url(../images/onlinekhabar.jpg);
        background-size:100% 100%;
}

我已经设法让它工作了，我的第一步是从nav#primary
中删除绝对定位，并使用margin left
而不是left
选项。我还需要向左浮动并内联显示
对于我的contentdiv#main
我还需要向左浮动并内联显示。这就是我的移动第一次接近的位置：绝对位置（所以我的导航可以覆盖它）。我的小型媒体查询（最小高度：768px）
，将位置设置回默认值（静态）
在我的jQuery中，我需要添加这段代码，以获得根据窗口高度更改的最小高度（注意：最小高度不是高度）
50是为了去掉我的顶杆高度
结果：
流动电话：

平板电脑：
首先，非常感谢你们的帮助，没有你们，我是不会这么做的
我已经设法让它工作了，我的第一步是从nav#primary
中删除绝对定位，并使用margin left
而不是left
选项。我还需要向左浮动并内联显示
对于我的contentdiv#main
我还需要向左浮动并内联显示。这就是我的移动第一次接近的位置：绝对位置（所以我的导航可以覆盖它）。我的小型媒体查询（最小高度：768px）
，将位置设置回默认值（静态）
在我的jQuery中，我需要添加这段代码，以获得根据窗口高度更改的最小高度（注意：最小高度不是高度）
50是为了去掉我的顶杆高度
结果：
流动电话：

平板电脑：
这是因为你在身体上设置了相对位置。尝试用容器包装导航标签并给出相对位置
像这样的
HTML:
<body>
    <header id="topbar"></header>
    <section id="container">
        <nav id="primary"></nav>
    </section>
</body>

这是因为你设定了身体的相对位置。尝试用容器包装导航标签并给出相对位置
像这样的
HTML:
<body>
    <header id="topbar"></header>
    <section id="container">
        <nav id="primary"></nav>
    </section>
</body>

一旦移除填充顶部：50px从nav#primary
开始并检查。它仍然有一个较小的问题（如20px），我需要填充顶部以清除顶部栏（50px高度）。在nav#primary
中给出左：0
和右：0
。（移除左侧：-100%；
）移除填充顶部后：50px从nav#primary
开始并检查。它仍然有一个较小的问题（如20px），我需要填充顶部以清除顶部栏（50px高度）。在nav#primary
中给出左：0
和右：0
。（删除左：-100%；
）好的，现在我有一个奇怪的溢出问题，请参见图片：然后尝试溢出-y:auto？最初的问题是div的高度是视口的100%，而不是auto，溢出默认为visible。因此，我们必须尝试将滚动条添加到div而不是body。好吧，这会让事情变得不同，我会看看我能想出什么。好吧，现在我有一个奇怪的溢出问题，请参见图片：而不是尝试使用overflow-y:auto？最初的问题是div的高度是视口的100%，而不是auto，溢出默认为visible。所以我们必须尝试将滚动条添加到div中，而不是body中。好吧，这会让事情变得不同，我会看看我能想出什么。