Question

我希望有一个覆盖整个页面的div，即使内容必须滚动。

典型的方法是在html和body上设置100％高度时使用绝对定位的div。

但是，如果页面上的其他内容长于适合屏幕的内容，则我的100％高度div仅覆盖窗口的可见区域，并且在页面结束之前不会一直延伸。 / p>

CSS：

body, html {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

body {
  position:relative;
}

.wrapper {
  position:absolute; /* can't use fixed */
  background:yellow;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

.box {
  height:2200px;
}

HTML：

 <div class="wrapper">
 Scroll down (yellow box does not go to bottom when scrolling)
 </div>

 <div class="box">box</div>

</body>

Answer 1

这可能对其他人有所帮助，因为这是一个似乎已经回答的旧问题。

主要问题是你的div被绑定到视口而不是身体。由于您希望将它绑定到身体使用： -

    body {
        position: relative;
    }

也不要添加高度：100％到正文或html（不需要）应该这样做。现在你的.wrapper div将100％对你的身体。即使您滚动页面，它也将保持100％，因为它绑定到正文。

Answer 2

你的身体有一个默认的height:100%，这是你需要从你的风格中移除它所需的高度自动窗口的初始高度

body, html {
  margin:0;
  padding:0;
  <--height:100%;--> Removed
  width:100%;
}

<强> Working demo

绝对定位DIV为身高的100％

2 个答案: