标签：style blog http color io os ar sp div
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0; } body{ height:100%;} html{ height:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:80px 0 35px 0; overflow:hidden; } #header{position:relative; height:80px;margin-top:-80px; background:#f1f1f1; border:1px solid #ddd;border-width:1px 0 1px 0;} #aside{position:relative; float:left; width:198px;height:100%;overflow:auto; background:#fff;} #main-content{position:relative;height:100%;overflow:auto;} #footer{position:relative; height:30px; clear:both; background:#f1f1f1;border:1px solid #ddd;} </style> </head> <body> <!-- <ul id="topbar"> <li>123</li> <li class="pull-right">123</li> </ul> --> <div id="header"> header </div> <div id="aside"> left </div> <div id="main-content"> ddd </div> <div id="footer"> footer </div> </body> </html>
更酷的效果 http://moocss.com/styleguide/dpl/widget/cool-system-layout/index.html
纯CSS 实现DIV 高度 height 100% 全屏布局
标签：style blog http color io os ar sp div
原文地址：http://www.cnblogs.com/lansir/p/4043507.html
