css - 自动设置网页高度

Question

我正在开发一个web-application，有很多静态页面和动态页面。所以我想根据内容设置它们的高度。为此，我只是创建了一个外部 div，我只在其中提供了与容器相关的样式。如下所示

.mainbox
{
    margin-left:auto;
    margin-right:auto;
    width:80%; 
}

在下一个选择器中，我指定了一个固定高度，这有助于我将背景区域扩展到主页的内容。但这并不能解决我的目的。如下所示。

.mbstyles
{
    margin-top:0; height:800px; background-color:#FCFAE6 
}

现在，当我根据内容浏览其他静态/动态网页时，要么有很多空白背景空间，要么所有空间都被占用了。请根据内容建议我还应该做些什么来管理这个高度。

谢谢!!

Answer 1

您使用的是 float div 吗？如果是这样，删除 height:800px;并尝试将以下内容添加到容器的末尾:

<div class="mainbox">
    // all of your content

    //important new part:
    <div class="breaker"></div>
</div>

并在您的 CSS 中添加:

div.breaker
{
    float:none;
    clear:both;
}

float 内容不会影响其父元素的高度(出于某种原因)。breaker 中的 clear:both 指令确保 div 在所有 float 内容之后呈现，并且它不参与“ float 流”，可以这么说，甚至打破了以这样一种方式 float ，即断路器之后的 float div 位于断路器之后/下方显示的新链中。由于 breaker 显示在 float div 下方，但它本身并不是 float div，因此容器需要拉伸(stretch)以适应其内容，这正是我们想要的!

希望对您有所帮助!