Question

我正在研究web-application，还有许多静态页面和动态页面。所以我想根据内容设置自己的身高。要做到这一点，我只是创建了一个外部div，我只给出了与容器相关的样式。这如下

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

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

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

现在，当我根据内容浏览其他静态/动态网页时，有很多空的背景空间或所有空间都已消耗掉。请根据内容建议我还应该做些什么来管理这个高度。

谢谢！

Answer 1

你在使用浮动div吗？如果是这样，删除高度：800px;并尝试将以下内容添加到容器的末尾：

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

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

给你的css添加：

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

浮动内容不会影响其父元素的高度（出于某种原因）。断路器中的clear:both指令确保div在所有浮动内容之后呈现，并且它不参与＆＃34; float-flow＆＃34;，所以说，甚至打破浮动流以这样一种方式，即在断路器处于断路器之后/之下显示的新链中时浮动的div。因为断路器显示在浮动div下面，但不是浮动div本身，容器需要拉伸以适应其内容，这正是我们想要的！

我希望这有帮助！

自动设置网页的高度

1 个答案: