【问题标题】：Set height 100% on absolute div在绝对 div 上设置高度 100%
【发布时间】：2012-12-22 11:18:21
【问题描述】：

我遇到了覆盖 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，但我希望它覆盖整个body。

提前致谢:)

【问题讨论】：

使用 JQUery 以绝对位置调整 DIV 的大小
这是 CSS 的第一个问题..min-height 并没有真正保证名称的含义：/

标签： html css absolute

【解决方案1】：

尝试添加

position:relative

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

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

【讨论】：

感谢您提供有用的信息，尽管我不得不放一个浮动：也可以在上面工作:)
左边的浮点数在您的原始代码中，没有任何区别：jsfiddle.net/rvKPq/3
对于任何阅读的人：我认为这应该是正确的答案（并且有更高的赞成票），因为它首先正确地提供了解决方案，并且它为解决方案添加了解释而不仅仅是代码粘贴。
我也认为这是最好的答案。
颠倒这个答案的逻辑，我添加了 position: absolute to the child .... 和宾果游戏！为什么它起作用我不知道！！！

【解决方案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;
}

【讨论】：

好的，所以每个人都在寻找正确答案的路上，但是 float: left 和 position: relative on body 解决了它。谢谢！
我完全不知道为什么会这样，但确实如此......当你发现物理停止工作的现实时，这是这些悲伤的时刻之一。
不是float 有什么不同，而是position: relative;。 position: absolute; 根据相对父母工作，这就是为什么这样做。 “绝对定位的元素相对于最近定位的祖先（非静态）定位。”更多信息在这里：developer.mozilla.org/en-US/docs/Web/CSS/position
@Cthulhu 是对的。我不知道为什么有人会将float: left 添加到正文中。我的意思是它不会造成任何伤害，但仍然......
3000px 没有意义，因为它会增加滚动和不必要的空间，修复？

【解决方案3】：

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

这是一种更好的方法，可以让您控制边距。

代码如下：

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

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

【讨论】：

这是对我有用的解决方案。我从来不知道你可以按位置拉伸图像。

【解决方案4】：

完全拉伸（水平/垂直）

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我没有使用body，而是使用html：

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

div {
   position: absolute;

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

【讨论】：

将顶部和底部都设置为 0 对我来说是这样做的