完全拉伸（水平/垂直）

Question

我遇到了覆盖100％高度div 的问题。我可以使用固定的位置来解决封面，但这不是我想要的，因为你应该可以向下滚动'封面'＆gt;所以分辨率低于我的人可以看到整个内容。

代码示例：

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，但我希望它覆盖整个身体。

提前致谢：）

Answer 1

尝试添加

position:relative

你的体型。每当绝对定位任何东西时，你需要将一个父容器放在相对位置，因为这会使项目绝对位于相对的父容器。

因为你没有相关元素，所以css不会知道div绝对位置是什么，因此不知道该怎么采取100％的高度

Answer 2

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

Answer 3

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

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

以下是代码：

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

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}

Answer 4

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

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

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}

Answer 5

完全拉伸（水平/垂直）

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

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

Answer 6

另一种不使用任何高度但仍可填充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;
}

在绝对div上设置高度100％

6 个答案:

完全拉伸（水平/垂直）

居中div（垂直/水平）