设置DIV根据内容自动调整高度的三个方法

Posted 2020-06-16

Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度，我们看下面的html代码：

<divid="main"><divid="content"></div></div> 

当Content内容很多时，即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说，内容的高度容器main的高度还是没有自动撑开。

我们有三种方法可以解决这个问题。

一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。Html代码如下：

<divid="main"><divid="content"></div><divstyle="font: 0px/0px sans-serif;clear: both;display: block"></div></div> 

二，增加一个容器，在代码中存在，但在视觉中不可见。Html代码如下：

<divid="main"><divid="content"></div><divstyle="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div></div> 

三，增加一个BR并设置样式为clear:both。Html代码如下：

<divid="main"><divid="content"></div><brstyle="clear:both;"/></div>