Question

我在新网站上工作，下面是草稿代码。我面临的问题是底层内容div。底部div很好，内容较少，并且填充了剩余的浏览器空间。但是如果我在底部div中添加更多内容（使用页面滚动），则内容div背景不会继续。谁能帮我解决这个问题？

<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
#header {
height: 150px;
background: grey;
}
#content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
background-color: brown;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
</div>
</div>
</body>
</html>

Answer 1

我会取消绝对定位并在#content上使用以下CSS：

#content {
  min-height: calc(100% - 150px);
  background-color: brown;
}

＆＃13;

* {
padding: 0;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
#header {
height: 150px;
background: grey;
}
#content {
min-height: calc(100% - 150px);
background-color: brown;
}

＆＃13;

<html>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
<p>body content</p>
</div>
</div>
</body>
</html>

＆＃13;

CSS帮助 - 修复了顶部div，底部div以填充页面的其余部分 - 底部div背景问题

1 个答案: