在绝对 div 上设置高度 100%
Posted
技术标签:
【中文标题】在绝对 div 上设置高度 100%【英文标题】：Set height 100% on absolute div 【发布时间】：2012-12-22 11:18:21 【问题描述】：我遇到了覆盖 100% 高度 div 的问题。我可以使用固定位置来解决封面问题，但这并不是我真正想要的，因为您应该能够在“封面”上向下滚动 > 所以分辨率低于我的人可以看到整个内容。
代码示例：
<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 并没有真正保证名称的含义：/
【参考方案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 对我来说是这样做的以上是关于在绝对 div 上设置高度 100%的主要内容，如果未能解决你的问题，请参考以下文章