css实现移动端布局

目录

• 弹性盒
• 固定定位

弹性盒

//1.body,html
body,html{ height:100%; }

//2.外面最大的盒子，如果没有，就是body
body{ display:flex;flex-direction:column }

//3.头部
header{ height:100px;background:;flex-shink:0; }

//4.尾部
footer{ height:100px;background:;flex-shink:0; }

//5.中间内容
article{ flex:1;background:;overflow:auto; }

固定定位

//1.清除默认边距
*{ margin:0;padding:0; }

//2.body,html
body,html{ height:100%; }

//3.头部
header{ height:;background:;position:fixed;left:0;top:0;right:0; }

//3.尾部
footer{ height:;background:;position:fixed;left:0;bottom:0;right:0; }

//4.中间内容
article{ height:100%;background:;overflow:auto; }