Method for Solving Div adaptive height

Div indicates that the parent container does not adapt to the height based on the content. Let's look at the following code:

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

When there is a large amount of Content, even if the height of main is set to 100% or auto. Different browsers still cannot automatically stretch properly. The content height is relatively high, but the main height of the container still cannot be opened.

We can solve this problem in three ways.

1. Add a clear floating to let the parent container know the height. Note that there is a space in the floating container.

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

　　

2. Add a container that exists in the Code but is not visually visible.

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

　

3. Add a BR and set the style to clear: both.

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

 

Supplement:

<div id="main"> <div id="content">  <p>demo1</p>  <p>demo2</p>  <p>demo3</p></div> </div>#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}#content { float:left;}

　　

None of the above three methods is the best solution, because in the concept of program code, we recommend that you do not add meaningless tag code as much as possible.

My solution is to apply the style directly in the outermost div.

#main { height:100%;overflow:hidden;}