Question

我已经四处寻找并找到了解决这个问题的大量解决方案，其中任何一个似乎都不适合我。

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

Answer 1

你需要给你的身体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

容器div仅达到视口的100％

1 个答案: