参考：阮一峰的网络日志
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> body{ padding: 0; margin: 0; } .warp{ position:fixed; bottom: 0px; display:-webkit-box; display:flex; display:-ms-flex; display:-webkit-flex;
width:100%;
} .div1,.div2,.div3{ height:50px; flex:1; -ms-flex:1; -webkit-flex:1; -webkit-box-flex:1; position: relative; background: #ccc; text-align:center; } </style> <body> <div class="warp"> <div class="div1">这是div1</div> <div class="div2">这是div2</div> <div class="div3">这是div3</div> </div> </body> </html>
效果图：
