zoukankan      html  css  js  c++  java
  • 后台管理系统整体布局

    一个左边宽度固定,高度多余屏幕出现滚动条,右边宽度不确定,高度多余出现滚动条,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>
  • 相关阅读:
    python-Python调用wcf接口
    一个数据驱动的ui自动化框架思路
    selenium分布式部署
    UI自动化-Element is not clickable at point-----问题记录
    idea下载git代码
    windows的hosts文件路径
    端口号
    Hadoop压缩
    MongoDB(单节点)环境配置
    快排
  • 原文地址:https://www.cnblogs.com/zhouxiaobai/p/8657417.html
Copyright © 2011-2022 走看看