一个简单的手机端页面的布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="box"> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </div> </body> </html>
css @import url("m_reset.css"); .wh(@w,@h){ width:@w; height:@h; } .box{ .wh(100%,100%); .b(green); display:-webkit-box;/*定义一个弹性盒*/ -webkit-box-orient:vertical;/*将弹性盒设置为垂直*/} .header{ .wh(100%,43px);.b(yellow); } .main{ -webkit-box-flex:1;/*内容总体分为一份*/ overflow:scroll;/*滚动条*/ .b(blue); } .footer{ .wh(100%,43px);.b(red) }