[关闭]
@Rico 2014-08-01T16:25:38.000000Z 字数 2400 阅读 7304

CSS布局技巧之-高度自适应

CSS

何为高度自适应？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，
下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。

布局思路

在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。
但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的，
但这一法则在IE6中并不适用，因此在IE6中还得另辟蹊径。
在IE6中给html设定padding,并不会撑大html元素的尺寸，这正是我们要利用的地方。

在IE7+ 和 W3C浏览器中的方案

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>高度自适应 </title>
  5. </head>
  6. <style>
  7. body,div{margin:0;padding:0;color:#f00;}
  8. .top{background:#36c; height:100px;}
  9. .main{background:#F90;width:100%;position:absolute;top:100px;bottom:0;}
  10. /*把top设为100px，bottom设为0，就达到了高度自适应  */
  12. </style>
  13. <body>
  14. <div class="top">我是top</div>
  15. <div class="main">我是main，是绝对定位元素，把我的top设为100px，bottom设为0，就达到了高度自适应</div>
  17. </body>
  18. </html>

再看下效果：
pic
但是在IE6中就出问题了。pic

在IE6中的方案

好吧，不想再对IE6吐槽，只想尽快搞定它。
在IE6中的思路是，把html和body元素的高度设定为100%，
即浏览器窗口的高度，然后利用padding-top在html元素上挤出一点空间来，
因为绝对定位的最高参照物是参照html元素的，所以可以把顶栏绝对定位在html的padding-top那块空间上。
这时body的高度就是html的高度（也是浏览器窗口的高度）减去html的padding-top的值，这也是ie6非常奇怪的一个特性，
因为按照w3c盒模型来讲，增加了html元素的padding-top,则html元素的高度也会相应增加，这时浏览器窗口应该会出现垂直滚动条了。
但IE6不会，html的增加了padding-top后，整个html元素的高度还是保持不变，即浏览器窗口的高度，变化的是body的高度减小了，用来抵消html的padding-top.
还是先看看代码吧：

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>高度自适应 </title>
  5. </head>
  6. <style>
  7. html,body{height:100%;}
  8. body,div{margin:0;padding:0;color:#F00;}
  9. html{padding-top:100px;}
  10. .top{background:#36c; height:100px;position:absolute;top:0;width:100%;}
  11. .main{background:#F90;height:100%;}
  12. /*把top设为100px，bottom设为0，就达到了高度自适应  */
  14. </style>
  15. <body>
  16. <div class="top">我是top</div>
  17. <div class="main">我是main高度为100%，即body的高度</div>
  19. </body>
  20. </html>

pic

最终的兼容代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>高度自适应布局</title>
  6. <style>
  7. html,body{ height:100%;}
  8. body,div{ margin:0; padding:0; color:#F00;}
  9. * html{ padding-top:100px;}/*for ie6*/
  10. .top{ background:#36C; height:100px;}
  11. * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
  12. .main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
  13. * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
  14. </style>
  15. </head>
  16. <body>
  17. <div class="top">我是top，固定高度</div>
  18. <div class="main">我是main，高度随浏览器大小变化而变化</div>
  19. </body>
  20. </html>

效果图：
IE6,7,8标准模式
pic

Chrome FireFox
pic
如果在ID为main的div中加入高度为500的段落：
<p style="height:500px;border:5px solid red;"></p>
Chrome
pic
IE
pic
可以看到上面部分固定住了。

推广

这种方法也适用于顶栏与底栏高度固定，中间那栏高度自适应的三栏布局

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注