The solution is highly adaptive Div (rpm)

http://www.yutheme.cn/website/index.php/content/view/39/63.html

div highly adaptive is a more troublesome problem, friend artery there to see this article, help me solve a lot of problems, excerpt:

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.　

1  to 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>

2  to increase a 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>

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;}

These three methods are not the best solution, because the idea is to promote the program code so as not to add the code meaningless label

My solution is introduced directly in the outermost div style plus the following

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

My comment:

   Problems encountered in the work, baidu a bit, we have not had time to try all of the methods currently used are the three methods

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/01/10/2853962.html