您的位置：首页 > Web前端 > CSS

(div+css)上面固定下面自适应页面布局的实现（FF,IE)

2008-09-20 22:56 966 查看
<!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的高宽自动调整。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航