后台管理系统整体布局

最新推荐文章于 2024-04-09 16:58:43 发布

weixin_30882895

最新推荐文章于 2024-04-09 16:58:43 发布

阅读量721

点赞数

原文链接：http://www.cnblogs.com/zhouxiaobai/p/8657417.html

版权

一个左边宽度固定，高度多余屏幕出现滚动条，右边宽度不确定，高度多余出现滚动条，footer部分不管页面内容多少一直固定效果展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>页面整体布局</title>
    <style>
        body{
            overflow: hidden;
        }
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100%;
            overflow:auto ;
            background: #312a68;
        }
        .right {
            position: absolute;
            right: 0;
            left: 200px;/* 左侧的宽度 */
            top: 0;
            height: 100%;
            background: #ccc;
        }
        header {
            height: 100px;
            background: #333;
        }
        .con {
            /*overflow: auto;*/
            height:calc(100% - 200px);
            padding-bottom: 110px;/* 底部高度 + 底部和内容之间的间距 */
        }
        /* 放置的内容 */
        .content {
            overflow: auto;
            height:100%;
            margin: 10px;
            background: #29cee9;

        }
        footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            background: #fff;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="left">
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
    <br />中间区域内容
</div>
<div class="right">
    <header></header>
    <div class="con">
        <div class="content">
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容
            <br />中间区域内容

        </div>
    </div>
    <footer>底部的文字</footer>
</div>

</body>

</html>

转载于:https://www.cnblogs.com/zhouxiaobai/p/8657417.html

weixin_30882895

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统整体布局

一个左边宽度固定，高度多余屏幕出现滚动条，右边宽度不确定，高度多余出现滚动条，footer部分不管页面内容多少一直固定效果展示<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>页面整体布局</title>...
复制链接

扫一扫