Question

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

我正在尝试将包装div的高度设置为100％。在包装器内部，我有一个header, content and footer，它们都有一些高度。我的内容div中也有一个名为“slider”的div，它应该贴在内容的顶部。

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

要将滑块div设置为内容div的顶部，我将position:relative;设置为内容div，将position:absolute;设置为slider div。而且出现了我的第二个问题。绝对滑动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，以向您展示我的问题。

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

包装器div不占用页面的100％高度
滑块div重叠了我的其余内容

正如我之前所说，我在几分钟内就已经解决了这个问题，但现在我在这里提出这个问题，因为我无法解决这个问题。

建议赞赏：）

编辑：由于我在1个问题中有两个问题，我得到了两个不同的答案。

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

Answer 1

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

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

Answer 2

有时body和html标签有一些奇怪的填充，所以你需要在CSS代码中添加html, body {padding: 0;}。

关于滑块; 因为滑块的位置是绝对的，所以其他所有内容都将忽略滑块div，但滑块也会忽略所有其他内容，除了具有位置相对的父div。但是，我们需要在内容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>

Answer 3

包装器应该在absolute：位置并尝试指定显示

css包装器不占整页高度的100％

3 个答案: