总结:
1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行;
2.设置父框架的padding为100px,div进行float,padding有效;但div进行position,并配合left:0,padding失效;
3.弹性盒子模型需要position属性和两个相对立的属性,比如top和bottom,left和right。
4.要做出来自适应的三个模块,要会计算中间div进行position后left和right的值,此值与左右两边的div宽度有关
测试的代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } /*html,body{ height: 100%; }*/ .elasticityBox{ border: 1px #000 solid; padding: 100px; } .elasticityBox .box01{ position: absolute; border: 1px red solid; top:0; bottom: 0; left: 200px; right: 200px; } /*.elasticityBox .box01{ border: 1px red solid; float: left; }*/ .elasticityBox .box02{ border: 1px yellowgreen solid; width: 100px; position: absolute; left: 0; top:0; bottom: 0; } .elasticityBox .box03{ border: 1px yellowgreen solid; width: 100px; position: absolute; right: 0; top:0; bottom: 0; } </style> </head> <body> <div class="elasticityBox"> <div class="box01">123</div> <div class="box02">3456</div> <div class="box03">789</div> </div> </body> </html>