CSS教程:div仿框架方法

【 tulaoshi.com - Web开发 】

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows

问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住列祖列宗。

先请看demo：

运行代码框!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta name="author" content="Chomo" /link rel="start" href="http://www.14px.com" title="Home" /titlediv仿框架布局/titlestyle type="text/css"* { margin:0; padding:0; list-style:none;}html { height:100%; overflow:hidden; background:#fff;}body { height:100%; overflow:hidden; background:#fff;}div { background:#f60; line-height:1.6;}.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}/*---ie6---*/html { _padding:70px 10px;}.top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}.side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}.main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}.bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}/style/headbodydiv class="top"/divdiv class="side"br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br //divdiv class="main"br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br //divdiv class="bottom"/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：

运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta name="author" content="Chomo" /link rel="start" href="http://www.14px.com" title="Home" /titlediv仿框架布局 - 根据这个特性，一个仿框架的div布局就非常容易了/titlestyle type="text/css"* { margin:0; padding:0; list-style:none;}html,body { height:100%; overflow:hidden; background:#fff;}div { background:#f60; line-height:1.6;}.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px;}.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px;}.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}/style/headbodydiv class="top"/divdiv class="side"/divdiv class="main"利用overflow:hidden去掉了默认存在的滚动条，再根据上文中介绍的布局特性，一个仿框架的div布局就非常容易了/divdiv class="bottom"/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

让我们将应该有滚动条的地方的滚动条效果折腾出来：

运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta name="author" content="Chomo" /link rel="start" href="http://www.14px.com" title="Home" /titlediv仿框架布局 - 加上滚动条，一个div仿框架的基础概型已经完成/titlestyle type="text/css"* { margin:0; padding:0; list-style:none;}html,body { height:100%; overflow:hidden; background:#fff;}div { background:#f60; line-height:1.6;}.top { position:absolute; left:10px; top:10px; right:10px; height:50px; overflow:auto;}.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px; overflow:auto;}/style/headbodydiv class="top"/divdiv class="side"br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br //divdiv class="main"br /br /br /加上滚动条，一个div仿框架的基础概型已经完成br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br //divdiv class="bottom"/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]