2014-10-17 59 views
0

我在web-application上工作,还有很多静态页面和动态页面。所以我想根据内容设置它们的高度。 要做到这一点,我已经简单地创建了一个外部div,我只给出了与容器相关的样式。这是如下自动设置网页高度

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

并在下一个选择器中我已指定一个固定的高度,可以帮助我扩大到我的主页的内容的背景区域。但这并不能解决我的目的。它如下。

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

现在,当我浏览其它静态/动态网页的页面按内容或者有很多空回地面空间或所有空间都消耗掉。请根据内容建议我应该做些什么来管理这个高度。

谢谢!

+0

does not'height:auto work? – 2014-10-17 05:21:28

+0

不是最好的方式,但你可以使用溢出:隐藏 – himanshu 2014-10-17 05:23:03

+0

高度:汽车..No – 2014-10-17 05:26:17

回答

2

你使用浮动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在所有浮动内容之后呈现,并且它不参与“浮动流”,所以说,甚至以这种方式打破浮动流在断路器处于断路器之后/之后显示的新链条中之后,浮动的div。 因为断路器显示在浮动div下,但不是浮动div本身,所以容器需要拉伸以适应其内容,这正是我们想要的!

我希望这有助于!