首页 > 代码库 > 纯CSS 实现DIV 高度 height 100% 全屏布局
纯CSS 实现DIV 高度 height 100% 全屏布局
<!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% 全屏布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。