Nwo*_*rks 40 html css absolute
我正面临着覆盖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,但我希望它覆盖整个身体.
提前致谢 :)
Pet*_*ete 50
尝试添加
position:relative
你的体型.每当绝对定位任何东西时,您需要将其中一个父容器定位为相对位置,因为这将使项目绝对定位到相对的父容器.
因为你没有相关元素,所以css不会知道div绝对位置是什么,因此不知道该取100%的高度
ash*_*ley 45
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;
}
Jer*_*nce 11
很少有答案给出了高度和宽度100%的解决方案,但我建议你不要在css中使用百分比,使用顶部/底部和左/右定位.
这是一种更好的方法,可以控制保证金.
这是代码:
body {
position: relative;
height: 3000px;
}
body div {
top:0px;
bottom: 0px;
right: 0px;
left:0px;
background-color: yellow;
position: absolute;
}
接受的答案很棒。只是想为来这里的其他人指出一些事情。在这些情况下，边距是不必要的。如果您想要具有特定“边距”的居中布局，您可以将它们添加到右侧和左侧，如下所示：
.stretched {
position: absolute;
right: 50px; top: 0; bottom: 0; left: 50px;
margin: auto;
}
这非常有用。
作为奖励，绝对居中可用于获得极其简单的居中：
.centered {
height: 100px; width: 100px;
right: 0; top: 0; bottom: 0; left: 0;
margin: auto;
position: absolute;
}
小智 5
代替使用body，html对我有用：
html {
min-height:100%;
position: relative;
}
div {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}