css自适应弹性盒布局怎么实现自适应全屏

1、新建html文件

2、创建div及其内容

3、创建div样式

4、预览效果如图

5、去除最外边和中间div的宽度

6、预览效果如图

7、添加

-webkit-box-flex:1;

-moz-box-flex:1;

样式使其自适应浏览器的宽度

8、预览效果如图

9、缩小浏览器窗口，中间div的宽度随之缩小

10、添加margin:0; padding:0;样式去除左右上下的空隙

11、预览效果如图

附上样式

<style>

body{margin:0; padding:0;}

#wrap{

/* width:1000px;

margin:0 auto;*/

display:-webkit-box;

display:-moz-box;}

#left{

width:300px;

padding:10px;

background:#09F;

}

#content{

/*width:400px;*/

padding:10px;

background:#30C;

-webkit-box-flex:1;

-moz-box-flex:1;

}

#right{

width:300px;

padding:10px;

background:#F0F;

}

#left,#content,#right{

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;}

</style>