div+css上中下布局的问题
div头部和底部固定，中间部位想自适应到底部为止。一直没找到办法。各位有解决的办法么？<styletype="text/css">*{margin:0px;padding...
div头部和底部固定，中间部位想自适应到底部为止。 一直没找到办法。各位有解决的办法么？
<style type="text/css">
*{margin:0px; padding:0px;}
div{width:100%; font-size:30px; text-align:center; color:#fff;}
.top{height:100px; background:red;}
.nav{height:100%; background:blue;position:absolute;}/* 这里的height怎样才能自适应？absolute属性会穿过foot*/
.foot{position:absolute; height:100px;bottom:0px; background:gray;}
</style>
代码我放到这里了：http://pan.baidu.com/s/1o6ODfCm 展开
<style type="text/css">
*{margin:0px; padding:0px;}
div{width:100%; font-size:30px; text-align:center; color:#fff;}
.top{height:100px; background:red;}
.nav{height:100%; background:blue;position:absolute;}/* 这里的height怎样才能自适应？absolute属性会穿过foot*/
.foot{position:absolute; height:100px;bottom:0px; background:gray;}
</style>
代码我放到这里了：http://pan.baidu.com/s/1o6ODfCm 展开
2个回答
展开全部
正好自己以前写过，奉上最简短的代码，效果已亲测，兼容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;}
.nav {background:blue; top:100px; bottom:100px; height:auto;}
.foot {background:gray; bottom:0;}
</style>
</head>
<body>
<div class="top">我是头部</div>
<div class="nav">这里已经自适应到底部</div>
<div class="foot">我是底部</div>
</body>
</html>
注：IE6不支持，如想完美解决，请使用js动态获取页面高度，然后赋值给nav那个层。
附图：
更多追问追答
追问
.nav必须开始给他设置个高度100px吗？
好奇怪 为什么把它上面100px拿掉就不行了。
追答
因为上面的top、nav和foot这三个类的样式属性中有相同的内容，所以我给合并到一起了，这是我个人的CSS写作习惯而已，这样写可以减少代码量（我个人有严重的代码洁癖），也可以这样写比较好理解：
html,body {height:100%; *overflow:hidden; /* 消除IE7下的横向滚动条 */}
body {margin:0; padding:0; font-size:30px; text-align:center; color:#fff;}
.top {width:100%; height:100px; background:red; position:absolute; top:0;}
.nav {width:100%; height:auto; background:blue; position:absolute; top:100px; bottom:100px;}
.foot {width:100%; height:100px; background:gray; position:absolute; bottom:0;}我写的这句：
.top ,.nav ,.foot {width:100%; height:100px; position:absolute;}代表这三个类共用右边的三个属性，当然nav这个类它的实际高度不是100px，所以在下面一句重新定义了nav的高度height:auto 。CSS有个语法规则就是当多个相同的类存在属性重复定义时，以最下面的样式为准。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js获取总高度，然后减去上面和下面的高度，将这个高度赋值给中间的div即可。
追问
就是不想用js实现的。 其实在楼上那方法也有问题，当中间内容很多行的时候还是会穿越到底部。
纯css已经找到办法了，还是csdn上大牛多。
追答
呵呵。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
