0

我四处搜索并找到了很多解决这个问题的方法，但似乎没有一个对我有用。

我试图让 .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，但我没有成功使容器拉伸到页面底部，而不是加载的视口底部。帮助？

4

1 回答 1

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

于 2013-06-11T19:36:19.693 回答