Question

父级div高度100%，里面有两个子div，上下排列，上面的div高度固定，下面的div如何做到自适应高度

例如
<div id="parent1" style="height:100%;width:100%">
<div id="son1" style="height:150px;width:100%">
</div>
<div id="son2" style="">
</div>
</div>
son2的style该如何设置，高度为parent1-son1的高度

Answer 1

<div id="parent1" style="height:100%;width:100%">
    <div id="son1" style="height:150px;width:100%">
    </div>
    <div id="son2" style="height:auto;min-height:150px;width:100%">
    </div>
</div>

你要做自适应，当然用AUTO，，当然，你又想内容太少的时候，指定它一个高度，就可以用min-height这个是最小高度的意思，意思就是，如果容器没有达到这个高度就按这个高度，超过这个高度，就按height。。。。还有MAX-HEIGHT，这是最大高度，限制高度的作用。。。

Answer 2

你这边父级div的高度是100%，son1的高度是150，son2的高度也定位150不久可以了吗，运行一下这段代码看看是不是你要的效果
<div id="parent1" style="height:100%; width:100%; background:#039; border:1px solid #ccc;">
<div id="son1" style="height:150px;width:100%; background:#039;">
</div>
<div id="son2" style="background:#06F; height:150px;">
</div>
</div>

Answer 3

mx-height:150px;

Answer 4

<div id="parent1" style="background:#ccc;height:100%;width:100%;overflow:hidden">
<div id="son1" style="background:#d5d5d5;height:150px;width:90%;margin:0 auto;">
</div>
<div id="son2" style="height:auto;width:90%;margin:0 auto;overflow:hidden">内容
</div>
</div>
--------------------------上面的背景色和margin值仅为了测试用，可以去掉-------------------------