如果可以不考虑IE67可以用display:table布局：
HTML：
<div class="outer"><div class="inner-title">
A
</div>
<div class="inner-content">
B
</div>
</div>
CSS：
.outer{background-color:blue
height:400px
display: table
width:100%
}
.inner-title{
background-color:#CCC
display:table-row
width:100%
height:100px
}
.inner-content{
background-color:#888
display:table-row
width:100%
}
IE6和IE7下估计只能用JS算高度了
原理：先给父级<div>设置宽度（像素）
然后再子<div>里，设置百分比，如图示。
代码原件：
<div style="width:80pxheight:50pxborder:#FF0000 3px solid"> <div style="width:20%height:50%border:#CC33FF 3px solid"></div> </div>
复制到<body></body>之间使用即可。
在文档流中，DIV的高度默认就是根据内容的高度自适应的。如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。再或者利用css3的flexbox布局，设置父级的display为flex，方向为纵的，然后设置其flex：1；
