我四处搜寻，找到了大量解决该问题的方法，但似乎没有一种对我有用。
我正在尝试让.containerBody div一直延伸到页面底部。加载页面时，它看起来不错，但是在具有需要滚动才能查看的内容的页面上，.containerBody div结束于视口的底部（或页面加载时视口的底部）。对于内容适合初始屏幕的页面，这显然不是问题。但是，对于任何具有更多内容的页面，.containerBody都只是部分结束。
的CSS
html, body {
padding: 0;
margin: 0;
min-height: 100%;
font-family: Arvo, serif;
font-weight: normal;
font-size: 11.5px;
color: #333;
}
.containerBody {
width: 1000px;
height: 1000%;
background-color: #FCFCFD;
margin: 0 auto;
position: relative;
}
#tagtop {
width: 240px;
height: 110px;
margin-top: 0px;
margin-left: 120px;
position: relative;
}
.topContent {
float: left;
clear: both;
width: 340px;
padding-left: 647px;
margin-top: -95px;
position: relative;
font-size: 10px;
}
.topContent a {
color: #333;
}
.topContent a:hover {
color: #E9194E;
}
.bonusText {
display: inline;
font-family: Arvo,serif;
font-size: 13.25px;
font-weight: bold;
color: #E9194E;
}
的HTML
<body>
<div class="containerBody">
<div id="tagtop"> <a href="index.html"><img src="image.png"</img>
<h1>Text<div class="bonusText">text</div></h1></a>
</div>
<div class="topContent">
Text
<a href="www.google.ca">Link1</a>
<a href="www.google.ca">Link2</a>
</div>
<div class="workcontainer">
Title<br><br>
<img src="assets/placeholder.png">
<div class="workwords">Text</div>
<div class="worktags">Text</div>
<img src="assets/placeholder.png">
<img src="assets/placeholder.png">
<img src="assets/placeholder.png">
</div>
</div>
</body>
我尝试使用min-height并尝试将顶部和底部位置设置为0，但是我没有成功使容器拉伸到页面的底部，而不是拉伸到加载的视口的底部。救命？
最佳答案
您需要为您的身体设置100％的宽度，为您的高度设置100％的高度，并将显示设置为阻塞。
.containerBody {
width : 1000px;
height :100%;
background-color: #ccc;
margin: 0 auto;
display: block;
}
html, body {
padding:0;
margin:0;
min-height:100%;
font-family:Arvo, serif;
font-weight:normal;
font-size:11.5px;
color:#333;
height: 100%;
width: 100%;
}
见我的jsfiddle