自适应布局---高度问题

1、为了使页面初始有窗口一样高的高度，需要给最外层div设置高度

height:calc(100%-30px)

这样页面进来时候填充了整个页面

2、

正常情况下 父亲div等于子div的高度，但是bootstrap的栅格布局父亲div高度一直是0，必须手动设置它的高度，然后给父亲div设置的背景色才起作用

如果页面高度固定且大于窗口就设置一个固定的值

如果页面高度固定且小于窗口就设置一个固定的值为窗口高度

如果页面高度不确定，比如table选择25页 100页的时候，就需要计算高度动态设置高度

写一个函数计算里面div高度，赋值给父亲div

function    fixSize(){
 

var  h1 =  $("#searchDiv").height();
var  h2 =  $("#echartsDiv").height();
var  h3 =  $("#tableDiv").height();
var  hh = h1+h2+h3+100;
$("#sectionDiv").height(hh);

}

3

父亲div高度为0是由于高度塌陷造成，清除浮动即可自动计算父亲div高度，但是这样bootstrap的栅格自适应就不生效了

4

子元素DIV高度不确定时父DIV高度如何自适应

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

我们可以通过三种方法来解决这个问题　 
1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 
代码如下:

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

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

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

3增加一个BR并设置样式为clear:both。 

代码如下:

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