我的问题是我的背景容器只显示到屏幕底部。在那之后的部分我看不到它。我几乎尝试了所有方法，但似乎对我没有任何作用。我希望它根据页面大小进行调整。
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
我的 CSS 是
html, body {
height:100%;
}
#profilebg
{
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
background-color:#ffffff;
height: 100%;
top: 0;
bottom: 0;
display: block;
}
最佳答案
如果您不指定高度，则默认为“自动”，由内容的高度决定。
如果您在内容中 float 某些内容，请确保添加一个具有 ccs 样式的元素 clear:both 以便父级可以正确确定它的高度。
类似地，如果一个元素的任何子元素使用绝对定位，它将无法自动确定它的高度，因为绝对定位的子元素不再与父元素在同一范围内。
示例工作风格是:
html, body {
height:100%;
}
#profilebg
{
margin: 0 10%;
background-color:#ffffff;
}
编辑:更简洁的 CSS 样式 - 宽度与边距是多余的
编辑 2: 添加关于绝对定位的行
编辑 3: Div 结构以实现以下评论中的请求:
<div id="page-container">
<div id="header-container">
<!-- Put your header here -->
</div>
<div id="body-container">
<div id="profilebg">
<!-- Profile BG Container -->
</div>
<!-- Any other body content here -->
</div>
<div id="footer-container">
<!-- Footer content here -->
</div>
</div>
关于css - 将背景容器调整为页面高度而不是屏幕高度。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14242273/