54

我面临覆盖 100% 高度 div的问题。我可以使用固定位置来解决封面问题，但这并不是我真正想要的，因为您应该能够向下滚动“封面”> 所以分辨率低于我的人可以看到整个内容。

代码示例：

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

问题： div 的高度 100% 只包含 100% 的 webbrowser/viewport，但我希望它覆盖整个身体。

提前致谢 ：）

4

6 回答 6

70

尝试添加

position:relative

适合你的体型。每当绝对定位任何东西时，您都需要将父容器或祖先容器之一相对定位（或静态的默认位置以外的任何东西），因为这将使项目相对于所定位的祖先容器绝对定位。

由于您没有定位元素，css 将不知道 div 绝对定位到什么，因此不知道要采用 100% 的高度

于 2013-01-08T15:01:48.713 回答
61

http://jsbin.com/ubalax/1/edit。你可以在这里看到结果 

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}
于 2013-01-08T15:04:16.570 回答
12

很少有答案给出高度和宽度为 100% 的解决方案，但我建议您不要在 css 中使用百分比，使用顶部/底部和左/右定位。

这是一种更好的方法，可以让您控制保证金。

这是代码：

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}
于 2013-01-08T15:08:04.443 回答
6

完全拉伸（水平/垂直）

接受的答案很棒。只是想为其他来这里的人指出一些事情。在这些情况下，边距不是必需的。如果您想要一个具有特定“边距”的居中布局，您可以将它们添加到右侧和左侧，如下所示：

.stretched {
  position: absolute;
  right: 50px;  top: 0;  bottom: 0; left: 50px;
  margin: auto;
}

这是非常有用的。

居中 div（垂直/水平）

作为奖励，绝对居中可用于获得极其简单的居中：

.centered {
  height: 100px;  width: 100px;  
  right: 0;  top: 0;  bottom: 0; left: 0;
  margin: auto;
  position: absolute;
}
于 2014-01-30T20:39:04.983 回答
6

而不是使用body， usinghtml为我工作：

html {
   min-height:100%;
   position: relative;
}

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}
于 2016-09-26T11:29:08.123 回答
1

另一种不使用任何高度但仍填充 100% 可用高度的解决方案。在 codepen 上检查一下。http://codepen.io/gauravshankar/pen/PqoLLZ

对于这个 html 和 body 应该有 100% 的高度。此高度等于视口高度。

使内部 div 位置为绝对值，并给出顶部和底部 0。这会将 div 填充到可用高度。（高度等于身体。）

html代码： 

<head></head>

<body>
  <div></div>
</body>

</html>

CSS代码：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  position: relative;
}

html {
  background-color: red;
}

body {
  background-color: green;
}

body> div {
  position: absolute;
  background-color: teal;
  width: 300px;
  top: 0;
  bottom: 0;
}
于 2015-04-24T09:49:48.653 回答