布局(2)：css固定側邊欄的寫法

本文轉載自查看原文 2017-11-30 09:41 3670 布局總結

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Flutter Drawer 側邊欄、以及側邊欄內容布局 Drawer 側邊欄、以及側邊欄內容布局 CSS實現側邊欄固定寬度，內容欄自適應 FLEX實現兩側邊欄固定中間自適應布局 ElementUI 側邊欄伸縮布局 html css 浮層側邊欄案例：仿淘寶固定右側側邊欄的功能 JS網站廣告實現側邊欄滾動至div頂部后固定、鼠標滾動下拉側邊欄DIV固定側邊欄實現隨滾動條滑動固定的效果側邊欄導航