布局(2)：css固定侧边栏的写法

最新推荐文章于 2024-08-19 21:39:42 发布

allenmu1982

最新推荐文章于 2024-08-19 21:39:42 发布

阅读量928

点赞数 1

原文链接：http://www.cnblogs.com/qianxunpu/p/7927526.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .layui-side{
            position:fixed;
            width:200px;
            top:0;
            bottom:0;
            background-color: #393D49;
        }
    </style>
</head>
<body>
<div class="layui-side layui-bg-black">

</div>

</body>

这样写还有一个好处就是，侧边栏的高度是不固定的，它可以随不同大小的浏览器窗口而变化，兼容性也非常好ＩＥ８也行

（2）css固定顶部导航简单的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin:0;
            padding:0
        }
        .header{
            height:80px;
            width:100%;
            background-color:#ccc;
        }
        .fix-header{
           position:fixed;
            top:0
        }
        .content{
            height:1000px;
            padding-top:80px;
            background-color: #5fb878;
        }
    </style>
</head>
<body>
<div class="header fix-header">固定的顶部导航条</div>
<div class="content">23333</div>
</body>
</html>