html - css wrapper 没有占用整个页面的 100% 高度

Question

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

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

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

为了使 slider div 适合内容 div 的顶部，我将 position:relative; 设置为内容 div，将 position:absolute; 设置为 slider div。出现了我的第二个问题。绝对滑动的div是和其余内容重叠的，因为slider div的绝对定位导致其余内容跳到顶部。

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

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

内容和 slider 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使用相关代码向您展示我的问题。

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

1. wrapper div不占页面的100%高度
2. slider div 与我的其余内容重叠

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

感谢建议:)

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

我的第一个问题的解决方案是:Solution 1
我的第二个问题的解决方案是这个:Solution 2

Answer 1

为html, body设置min-height。在你的情况下:

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