- <!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">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>上面固定下面自适应</title>
- <style type="text/css">
- html
- {
- margin:0;
- overflow:hidden;
- _padding:61px 0px 0px 0;
- _border:0;
- }
- body
- {
- margin:0;
- height:100%;
- }
- #content
- {
- margin:0; /*公共*/
- width:100%;
- position:fixed;/*FF IE7 SF*/
- top:61px;
- bottom:0px;
- overflow: auto !important;
- _position: relative;/**IE6***/
- _top:0px;
- _OVERFLOW-Y: auto;
- _OVERFLOW-X: auto;
- SCROLLBAR-FACE-COLOR: #EEEEEE;
- SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
- SCROLLBAR-SHADOW-COLOR: #919192;
- SCROLLBAR-3DLIGHT-COLOR:#ffffff;
- SCROLLBAR-ARROW-COLOR: #919192;
- SCROLLBAR-TRACK-COLOR: #ffffff;
- SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
- _height:100%;
- }
- #header {
- position:absolute;/*公共*/
- top:0;
- left:0;
- width:100%;
- height:60px;
- border-bottom:solid 1px #AE85E1;
- background-color:#EFEFEF;
- overflow:auto !important;/*FF*/
- _OVERFLOW-Y: auto;/*IE6*/
- _OVERFLOW-X: auto;
- SCROLLBAR-FACE-COLOR: #EEEEEE;
- SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
- SCROLLBAR-SHADOW-COLOR: #919192;
- SCROLLBAR-3DLIGHT-COLOR:#ffffff;
- SCROLLBAR-ARROW-COLOR: #919192;
- SCROLLBAR-TRACK-COLOR: #ffffff;
- SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
- }
- </style>
- </head>
- <body>
- <div id="header">上部固定部分</div>
- <div id="content">
- <p>中部自适用部分</p>
- <p>设定宽度为1000px的线</p>
- <hr width="1000px" />
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- <p>中部自适用部分</p>
- </div>
- </body>
- </html>
本页面布局在firefox3和IE6下测试通过。其它浏览器没有测试,大家可以在其它浏览器下测试一下,然后把测试结果共享出来,谢谢!
主要思路:因FF和IE在解释css上面存在一定的差别(IE6对position:fixed不感冒,而FF和IE7则能识别),所以基于这两种类别浏览器模式进行考虑。
对于FF、IE7这种能识别position:fixed的浏览器,则把下面的布局div(content)使用fixed,使其能固定在上面div(header)的下面。
对于IE6,则通过设置html的padding使其在页面的上面空出一固定高度的填充,同时让div(header)固定的覆盖上面的填充。最后在网页中让div(content)完全覆盖body部分,并随着body的高宽自动调整。