Div+Css布局教程?

正好自己以前写过,奉上最简短的代码,效果已亲测,兼容IE7/8以及Chrome等现代浏览器,代码如下:

<!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; color:#fff;}

.top ,.nav ,.foot {width:100%; height:100px; position:absolute;}

.top {background:red; top:0;}

Div+Css布局教程?  第1张

.nav {background:blue; top:100px; bottom:100px; height:auto;}

.foot {background:gray; bottom:0;}

</style>

</head>

Div+Css布局教程?  第2张

<body>

<div class="top">我是头部</div>

<div class="nav">这里已经自适应到底部</div>

<div class="foot">我是底部</div>

</body>

</html>

注:IE6不支持,如想完美解决,请使用js动态获取页面高度,然后赋值给nav那个层。

转载请说明出处
网资源分享 » Div+Css布局教程?

发表评论

欢迎 访客 发表评论