第1个回答 2016-12-26
只要把div的height设为百分比即可自适应。但要注意，既然是百分比，就存在一个以什么为基准（也就是谁是这个百分比中的“百”）的问题，首先，这个div会以自己的父元素的height作为基准，如果父元素未明确设置height（或设为auto），那么就继续找自己的祖父元素，这样一直上溯，如果所有祖先元素都没有设置height，就以body（或html）的height为基准。
比如下面这个div1的height是整个页面height的80%，div2的height是div1的height的60%，不管页面的尺寸如何变化，这个比例都是不变的，这样就实现了自适应：
<style>
body {height:100%; margin:0; padding:0}
#div1 {width:200px; height:80%; background-color:#ccc}
#div2 {width:160px; height:60%; background-color:#888}
</style>
<div id=div1>
<div id=div2></div>
</div>本回答被网友采纳
比如下面这个div1的height是整个页面height的80%，div2的height是div1的height的60%，不管页面的尺寸如何变化，这个比例都是不变的，这样就实现了自适应：
<style>
body {height:100%; margin:0; padding:0}
#div1 {width:200px; height:80%; background-color:#ccc}
#div2 {width:160px; height:60%; background-color:#888}
</style>
<div id=div1>
<div id=div2></div>
</div>本回答被网友采纳
相似回答
