WEB系统整体布局CSS描述

图示如下，其中Title Bar, Side Bar及Nav Bar不随滚动条滚动而上下移动：
WEB系统整体布局CSS描述
详细代码与CSS如***释已很详尽：
<html>
    <head title='test'>
    </head>
    <body>
        <div class='container'>
            <div class='title-bar'>
                <h2>Title Bar</h2>
            </div>
            <div class='side-bar'>
                <h2>Side Bar</h2>
            </div>
            <div class='nav-bar'>
                <h2>Nav Bar</h2>
            </div>
            <div class='content'>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
                test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
            </div>
        </div>
    </body>
    <style>
        html, body {
            height: 100%; /* 子元素高度可同屏 */
            margin: 0; /* 去除缺省margin */
        }
        .container {
            position: relative; /* 子元素使用absolute相对本元素 */
            height: 100%; /* 高度同屏 */
            width: 100%; /* 宽度同屏 */
        }
        h2 {
            color: white;
        }
        .title-bar {
            position: fixed; /* title bar不随滚动条滚动 */
            height: 64px; /* 固定高度 */
            width: 100%; /* 宽度同屏 */
            z-index: 9999; /* content向上滚动时本元素不被覆盖 */
            background-color: black;
        }
        .side-bar {
            position: fixed; /* side bar不随滚动条滚动 */
            height: calc(100% - 64px); /* 高度填满同屏除title bar的剩余部分 */
            width: 128px; /* 固定宽度 */
            top: 64px; /* 上部为title bar */
            background-color: grey;
        }
        .nav-bar {
            position: fixed; /* navigation bar不随滚动条滚动 */
            left: 128px; /* 左部为side bar */
            top: 64px; /* 上部为title bar */
            height: 64px; /* 固定宽度 */
            width: calc(100% - 128px); /* 宽度填满同屏除side bar的剩余部分 */
            z-index: 9999; /* content向上滚动时本元素不被覆盖 */
            background-color: lightgrey;
        }
        .content {
            position: absolute; /* 可随滚动条上下滚动 */
            left: 128px; /* 左部为side bar */
            top: 128px; /* 上部为title bar和navigation bar */
            width: calc(100% - 128px); /* 宽度填满同屏除side bar的剩余部分 */
            background-color: white;
        }
    </style>
</html>
WEB系统整体布局CSS描述

相关推荐
