Div i.e. the parent container does not highly adaptive solutions based on the content

Div i.e. not according to content adaptive parent container height, we see the following code:

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

  When Content content for a long time, even if the main set height of 100%, or auto. Still can not automatically extend well in different browsers. Height of the content is relatively high, but the height of the container main thing is not softened.

  We can solve this problem in three ways.

  First, add a floating clear, let the parent know the height of the container. Please note, clear floating container has a space.

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

  Second, an increase in the container, is present in the code, but is not visible in the visual.

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

  Third, add a set style for BR and clear: both.

<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

Reproduced in: https: //www.cnblogs.com/public/archive/2011/05/16/2047294.html

Guess you like

Origin blog.csdn.net/weixin_34240520/article/details/93744095