zoukankan      html  css  js  c++  java
  • 只显示内容区域的滚动条

    top

    leftmenu

    container

    有一种布局如下,头区贴顶固定,滚动不跟随.左侧菜单也固定,也不跟随.只有右侧的内容区要有竖滚动条,并且滚动条只在这内容区域内.要如何实现?
    *关键位置在于,html设置了overflow:hidden.而container设置了竖滚动条 并且 从html body 到 container都设置了100%的高度

    html 结构如下和样式如下

    html->body->[div:top div:leftmenu div:container]
    
           * {
                margin:0;padding:0;
            }
            html{
                overflow:hidden;
                height:100%;
            }
            body{
                height:100%;
            }
            .top,.leftmenu{
                position:fixed;
            }
            .top{
                top:0;left:0;
                100%;
                height:48px;
                background-color:#696969;
            }
            .leftmenu{
                left:0;top:48px;
                background-color:#a9a9a9;
                200px;
                height:100%;
            }
            .container{
                height:100%;
                margin:48px auto auto 200px;
                padding:10px;
                overflow-y:scroll;
            }
    

    填充内容

    填充内容

    填充内容

    填充内容

  • 相关阅读:
    centos7.5部署mysql cluster NDB总结
    读《构建之法》13--17章有感
    读《构建之法》8--10章
    作业5.2
    作业5.1
    读《构建之法》6--7章读后感
    做汉堡,做汉堡
    《构建之法》1—5章读后感
    第二次作业
    1
  • 原文地址:https://www.cnblogs.com/mirrortom/p/6553457.html
Copyright © 2011-2022 走看看