在绝对定位的div上设置高度为100%

Question

在绝对定位的div上设置高度为100%

htmlcssabsolute

60

我遇到了关于

覆盖高度为100％的问题

。我可以使用position fixed来解决覆盖问题，但这并不是我想要的，因为您应该能够向下滚动“覆盖”>以便分辨率比我的低的人可以看到整个内容。

代码示例：

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%只包含web浏览器/视口的100%，但我希望它可以覆盖整个body。

- Nworks

使用jQuery调整绝对定位的DIV大小。 - Maysam

1

这是CSS中最大的问题之一... min-height并不能真正保证其名称所暗示的:/ - vsync

6个回答

67

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

- ashley

5

好的，所以大家都在朝着正确答案的方向努力，但是加上 "float: left" 和 "position: relative" 在 body 上解决了问题。谢谢！ - Nworks

4

我完全不知道为什么这个方法有效，但它确实有效...这是其中一个让你发现物理规律不再适用的悲伤时刻。 - vsync

23

重点在于 position: relative;，而不是 float。position: absolute;会相对于离它最近的定位上下文进行定位，这也就是为什么这样做可以生效的原因。"绝对定位的元素是相对于最近的已定位祖先元素（非 static 定位）进行定位"。更多信息请参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position - Cthulhu

@Cthulhu 关于position:absolute，你遗漏的是如果没有定位祖先元素，那么该元素会相对于其包含块进行定位。在这种情况下，无论如何都将是body，因此不需要在body上设置position:relative。在这里，body上的height是起作用的。 - Scott Marcus

6

把宽度设为“3000像素”没有意义，因为这样会导致滚动条出现并且浪费空间。需要修复吗？ - brauliobo

显示剩余5条评论

13

很少有答案给出了高度和宽度都为100%的解决方案，但我建议您不要在CSS中使用百分比，而是使用top/bottom和left/right定位。

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

以下是代码：

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

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

- Jerome Cance

这就是对我起作用的解决方案。我从未想过您可以通过位置来拉伸图像。 - Daniel H.

6

我尝试使用 body，但使用html 更加有效:

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

div {
   position: absolute;

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

- Misja

将顶部和底部都设置为0是解决我的问题的关键。 - schu34

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

- Kevin Redman

1

另一种解决方案是不使用任何高度，但仍然填充100％的可用高度。在CodePen上查看此示例。 http://codepen.io/gauravshankar/pen/PqoLLZ

为此，html和body应具有100％的高度。此高度等于视口高度。

使内部div位置绝对，并将顶部和底部设为0。这将填充div到可用高度。（高度等于body。）

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

- Gaurav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

尝试添加

position:relative

根据您的身体样式定位。无论何时确定任何东西的绝对位置，您需要父容器或祖先容器之一相对定位（或其他非默认静态位置），因为这将使该项绝对定位于已定位的祖先容器。

由于您没有定位元素，因此css不知道div是绝对定位的对象，因此也不知道要占用100％的高度。