WEB系统整体布局CSS描述

最新推荐文章于 2022-01-12 09:01:35 发布

thinshootout

最新推荐文章于 2022-01-12 09:01:35 发布

阅读量806

点赞数

分类专栏： Programming 文章标签： WEB

本文链接：https://blog.csdn.net/thinshootout/article/details/82839517

版权

Programming 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

图示如下，其中Title Bar, Side Bar及Nav Bar不随滚动条滚动而上下移动：
在这里插入图片描述

详细代码与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>

thinshootout

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB系统整体布局CSS描述

图示如下，其中Title Bar, Side Bar及Nav Bar不随滚动条滚动而上下移动：详细代码与CSS如下，注释已很详尽：&lt;html&gt; &lt;head title='test'&gt; &lt;/head&gt; &lt;body&gt; &lt;div class='container'&gt; &lt;...
复制链接

扫一扫

专栏目录