我四处搜索并找到了很多解决这个问题的方法，但似乎没有一个对我有用。
我试图让 .containerBody div 一直延伸到页面底部。当页面加载时它看起来很好，但在包含您需要滚动查看的内容的页面上，.containerBody div 在视口(viewport)底部结束(或者，页面加载时在视口(viewport)底部)。对于内容适合初始屏幕的页面，这显然不是问题。但是，对于包含更多内容的任何页面，.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>
我已经尝试使用最小高度并尝试将顶部和底部位置设置为 0，但我没有成功地使容器拉伸(stretch)到页面底部，而不是加载视口(viewport)的底部。帮忙？
最佳答案
您需要为 body 设置 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
关于html - 容器 div 仅达到视口(viewport)的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17052082/