Html css包装并没有占据整个页面的100%高度

我原以为这是件容易的事，我会在五分钟内完成，但现在花了我几个小时，所以我希望你能帮我解决这个愚蠢的、经常被问到的问题

我正试图将我的包装袋的高度设置为100%。在包装器内部，我有一个

页眉、内容和页脚，它们都有一定的高度。我的content div中还有一个名为“slider”的div，它应该贴在contents的顶部

我的问题是包装div只占浏览器窗口的高度，而不是整个页面的高度

为了使滑块div适合content div的顶部，我设置了
position:relative到内容分区和
位置：绝对到slider div.出现了我的第二个问题。绝对滑动div与内容的其余部分重叠，因为由于slider div的绝对位置，内容的其余部分跳到顶部

我的包装器div样式如下所示：

#wrapper{
    width:100%;
    height:100%;
    position:relative;
    background:green;
}

#slider{
    /* random image from google */
    background:url('http://makuwi.ch/wahl_informatik/download/carla_m/handball7.jpg') no-repeat;
    background-size:cover;
    width:100%;
    height:45%;
    position:absolute;
    top:0;
}

#container{
    width:50%;
    height:70%;
    background:orange;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

内容和滑块div如下所示：

#wrapper{
    width:100%;
    height:100%;
    position:relative;
    background:green;
}

#slider{
    /* random image from google */
    background:url('http://makuwi.ch/wahl_informatik/download/carla_m/handball7.jpg') no-repeat;
    background-size:cover;
    width:100%;
    height:45%;
    position:absolute;
    top:0;
}

#container{
    width:50%;
    height:70%;
    background:orange;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

我准备了一份包含相关代码的报告，向您演示我的问题

总的来说，我有两个问题：

包装器div不占页面的100%高度
滑块div与我的其余内容重叠
正如我之前所说，我最初认为我会在几分钟内解决这个问题，但现在我在这里问这个问题，因为我无法解决它

建议（欢迎：）

编辑：因为我在一个SO问题中有两个问题，所以我得到了两个不同的答案

我的第一个问题的解决方案是：

我的第二个问题的解决方案是这样的：
包装器应该处于绝对：位置，并尝试为
html，body
指定显示设置
min height
。就你而言：

html,
body
{
  width:100%;
  min-height:100%;
  background:purple;
}

有时，body和html标记有一些奇怪的填充，因此需要将
html，body{padding:0；}
添加到CSS代码中

关于滑块；
由于滑块具有绝对位置，所有其他内容将忽略滑块div，但滑块也会忽略所有其他内容，但具有相对位置的父div除外。但是，我们需要在content div中添加一个padding top，这样除了位置为绝对值的元素之外，所有内容都将被删除<代码>#容器{填充顶部：45%；}

内容的高度必须设置为“自动”。因此，它将采用定位子元素所需的高度。因此，添加
#wrapper{height:auto；}

您的代码应该是：

CSS

HTML



aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa


链接/赞助商

你想要什么？不完全是。它应该滚动整个页面，而不仅仅是容器。现在我很困惑。如果我在jsFiddle中更改它，它就可以正常工作。但是如果我把整把小提琴复制到本地计算机上的一个新文件中，包装就不合适了…显示文件。粘贴在pastebin上allwell，在我的Chrome上，它看起来就像粘贴在pastebin上一样：/OK，这是一个缓存问题。我清除了缓存和饼干，现在看起来不错。非常感谢。没问题。祝你好运！：）好的，这修复了重叠滑块的问题。但是包装高度的问题仍然存在。不管怎样，谢谢你解决了这两个问题之一Hanks，但是自动高度对我来说不起作用。我把你的答案和拉法的答案混为一谈。这是我现在的小提琴：但是头顶已经没有高度了。。。为什么
高度：25%是否标头不再工作？因为如果父div具有“自动高度”，则无法为元素设置百分比高度。因此，您必须使用px而不是%。但是没有父级具有
height:auto？