css 包装器未占用整个页面的 100% 高度

Question

好吧，我认为这很容易，我会在五分钟内完成，但现在我花了几个小时，所以我希望你能帮助我解决这个愚蠢且经常被问到的问题。

我正在尝试将环绕 div 的高度设置为 100%。在包装器内，我有一个 header, content and footer ，它们都有一定的高度。我的内容 div 中还有一个名为 "slider" 的 div，它应该贴在内容顶部。

我的问题是环绕 div 只占据了我浏览器的高度 window 而不是整个页面。

为了使滑块 div 适合内容 div 的顶部，我将 position:relative; 设置为内容 div 并将 position:absolute; 设置为滑块 [=53] =].出现了我的第二个问题。绝对滑动div是和其余内容重叠的，因为由于滑块div.

的绝对定位，其余内容会跳到顶部

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

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

内容和滑块 div 如下所示：

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

我准备了一个jsFiddle和相关代码来向你展示我的问题。

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

wrapper div 没有占据页面的 100% 高度
滑块 div 与我的其余内容重叠

正如我之前所说，我最初认为我会在几分钟内解决这个问题，但现在我在这里问这个问题是因为我无法解决它。

感谢建议:)

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

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

Answer 1

wrapper 应该在 absolute:position 并尝试指定显示

Answer 2

为 html, body 设置 min-height。你的情况：

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

Answer 3

有时正文和 html 标签有一些奇怪的填充，因此您需要将 html, body {padding: 0;} 添加到 CSS 代码中。

关于滑块；因为滑块有一个绝对位置，所以所有其他内容都会忽略滑块 div，但滑块也会忽略所有其他内容，除了具有相对位置的父级 div。但是，我们需要给内容添加一个padding top div，所以除了绝对位置的元素之外的所有内容。 #container {padding-top: 45%;}

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

您的代码应该是：

CSS

html{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background:black;
}

body{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background:purple;
}

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

header{
    width:100%;
    height:25%;
    background:darkblue;
    position:relative;
}

#slider{
    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;
    padding-top: 45%;
}

footer{
    width:50%;
    height:5%;
    background:purple;
    margin-left:auto;
    margin-right:auto;
}

HTML

<body>

<div id="wrapper">
    <header>
        <div id="logodiv"></div>
    </header>

    <div id="container">
        <div id="slider"></div>

        <div id="randomtext">
            <p>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
                aaa<br>
            </p>
        </div>
    </div>

    <footer>
        <div id="linkssponsoren">
            <p>Links/Sponsoren</p>
        </div>
    </footer>
</div>
</body>

css 包装器未占用整个页面的 100% 高度

css wrapper is not taking 100% height of whole page

html

css

css-position