div+css上中下布局的问题
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
正好自己以前写过，奉上最简短的代码，效果已亲测，兼容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;}
我写的这句：
代表这三个类共用右边的三个属性，当然nav这个类它的实际高度不是100px，所以在下面一句重新定义了nav的高度height:auto 。CSS有个语法规则就是当多个相同的类存在属性重复定义时，以最下面的样式为准。
这个写一块我是知道的。 要我写直接div{xxxxxxxxxxx} 了 呵呵
主要是想知道如果将.nav 删了再去运行怎么就没效果了呢？反正以下面重定义的为准。
如果你把那行中的nav这个类名拿掉，那么nav这个类就只有background:blue; top:100px; bottom:100px; height:auto;这四个属性，而没有position:absolute这个关键性的属性，后面的top:100px; bottom:100px; 两个属性是不起任何作用的，这样的话nav这个类所在的层就不能自适应高度到底部了，而是跑到页面的最上面去了，且正好被top这个层所覆盖，所以你看不到效果。你可以把top这个类中的background:red这句去掉，刷新页面你就能发现蓝色的nav原来在最上面。
就是不想用js实现的。 其实在楼上那方法也有问题，当中间内容很多行的时候还是会穿越到底部。
纯css已经找到办法了，还是csdn上大牛多。
呵呵。
div+css上下布局问题
1、因为客户端浏览器的宽高是不一致的，所以你不能使用百分数来定义宽高，此外，浏览器最大化和向下还原时宽高也是不一样的。2、个人认为这样做没有太大的实际意义，只要你的页面排版合理好看就行，没必要纠结于滚动条。如果你非要实现这样的效果，你可以使用JS来检测客户端的分辨率，并减去上面DIV的...
div+css布局错乱问题解决方法
这个问题需要把left和right再使用一个div包含起来，直接上代码啦，下边就可以实现你要求的布局。foot总在下边，并能随着left，right的高度改变自动调整。<div id="box"> <div id="content"> <div id="left">这里是页面的左部分内容<\/div> <div id="right">这里是页面的右部分内容<\/div> <\/di...
div+css中上一个div会把下一个div覆盖住,为什么
div浮动造成，常用解决方法是清除浮动 div受到相对定位或者绝对定位的影响，定位是可以设置left，right，bottom，top，等位置样式的，解决方法一般是清除定位，或者解决兼容性，合理控制left，right ，bottom，top四个属性的值。另外还有一种不常见的情况，例如margin的负数值，可以造成div偏离原来的位置，建议...
div+css上中下布局的问题
<!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...
DIV+CSS想在主体部分分为上下左右4部分该怎么写?
做四个标签，上和下的宽度设置页面宽度 中间两个设置宽度为页面宽的一半稍小，并且浮动各为左、右象永恒同学所说的。
前端div+css布局问题
html在渲染domTree的时候，就像是搭积木一样，大的div元素就相当于框框，或者积木的容器，而两个小的子级元素就相当于要放进去的积木，左边的积木放上去，那一层就算是搭满了，右边的元素只能往下放了。！div的默认排列方式，是垂直层级排列的 当然这只是我的猜测，也可能是设置了float但是溢出了，如果...
div+css有上下两个框如何让下面的那个框和左边的那个对齐?急!!_百度知...
div嵌套，外面一个大的div，里面包含两个小的div也就是你说的两个左右对齐的div，<div id="div0"> <div class="div1">框一<\/div> <div class="div2">框二<\/div> <\/div> div1，div2的width，margin及float属性设置得一样，基本就可以了，其他属性可不一样。另外非必须的情况下，尽量少...
div+css编辑样式,此处上下两个div重叠了一部分,并且错位1px,请问怎么解...
设计模式还是浏览器模式，如果浏览器模式是这样请发代码看看。如果设计模式这样浏览器好的就不用管，最终承认是浏览器模式
我在css里定了上下两个div框架、可是下面的总跑到上面框架的位置是怎...
看看 两个div的css用 有没有 float: 或 position: 之类的属性，他们都有可能导致。你百度一下他们的css 功能就知道了 他们是使目标脱离文档流并且不占位的 ，就是 有他它这个属性 就会飘起来 也就是浮动 解决办法：1。去掉就好了 ，2。（提倡）但有事后 还就需要加他 ，那就在浮动的div...
DIV+CSS布局问题,我们想让两个DIV标签并排,第2个为什么老跑第一个...
给div加浮动float属性就可以了，左浮动（float：left）或者右浮动（float：right）都无所谓只有宽度不超过他们的父元素的宽度就ok，最后加上一个clear属性来清除浮动，防止下面的元素发生错位现象。把下边代码贴到网页的body里面 <style> div{ border:1px solid #000;} .div{ width:300px; height:200...
