位置固定的层_总在最上面和总在最下面和总在中间_这里的滚动条是div的不是body的

最新推荐文章于 2023-09-21 11:00:23 发布

原创最新推荐文章于 2023-09-21 11:00:23 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #header #xhtml #html #javascript #border

本文介绍了一种在不同浏览器中实现固定头部和尾部的布局技巧，通过使用绝对定位和特殊的CSS样式确保内容在IE6等旧版浏览器中也能正确显示。文中还展示了如何利用JavaScript动态生成列表。

<!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>
<style type="text/css" >

    *{padding:0;margin:0;}
    html,body{_height:100%;_overflow:hidden;}
    #header{top:0;}
    #footer{bottom:0;}

    #header,#footer
    {
        position:fixed;
        _position:absolute;
        z-index:1000;
        width:100%;
        background:#eee;
        left:0px;
    }
    #content
    {
        background:#ccc;
        _height:100%;
        _overflow:auto;
        position:relative;
        padding:20px;
    }

    #Layer1
    {
        position:absolute;
        left:319px;
        top:57px;
        width:500px;
        height:88px;
        z-index:1;
        border:#FF0000 solid 2px;
    }

</style>
</head>
<body>
<div id="header">header，我就是不下去～！</div>

<div id="content">
    <script language="javascript">for(i=0;i<100;i++){document.write(i+"<br />");} </script>
    <div style="position:absolute; top:50px;left:5px;text-align:right;border:1px solid #aaa;">
        123<br />
        123<br />
        123<br />
        123<br />
        123<br />
        123<br />
        在ie6下，这里也可以表现出absolute的效果
    </div>
</div>

<div id="Layer1">我也不上去，我也不下去，我就不动我的地方。</div>

<div id="footer">footer，我就是不上去～！</div>

</body>
</html>