css+div 实现上中下左右布局
2016-10-31 本文已影响0人
Silence11
css+div 实现上中下布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div+css上中下左右布局</title>
<style>
html,body {height:100%; *overflow:hidden; /* 消除IE7下的横向滚动条 */}
body {margin:0; padding:0; font-size:30px; text-align:center; }
.top ,.nav ,.foot {width:100%; height:100px; position:absolute;}
.top {border:solid 1px red; top:0;}
.nav {border:solid 1px blue; top:100px; bottom:100px; height:auto;}
.foot {border:solid 1px red; bottom:0;}
.left{ height: 100%; position: absolute; width:14%; border: solid 1px red;}
.right{ border: solid 1px red; position: absolute; margin-left:14%; height: 100%; width: 100%;}
</style>
</head>
<body>
<div class="top">我是头部</div>
<div class="nav">
<div class="left"> 左 </div>
<div class="right">右</div>
</div>
<div class="foot">我是底部</div>
</body>
</html>
QQ图片20161031165813.png
