有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

上下固定中间滚动条,分类页布局技巧

代码编程 cat 11个月前 (11-08) 75次浏览 已收录 0个评论 扫描二维码

上下固定中间滚动条

上下固定中间滚动条,分类页布局技巧

css:

    <style>
        body{
            margin:0;
        }
        html{
            font-size: 13.3333vw;
        }
        html,body{
            height:100%;
        }

        header{
            height:.6rem;
            background-color: red;
        }

        .main{
            background-color: yellowgreen;
            height:calc(100% - 1.2rem)
        }

        footer{
            height:.6rem;
            background-color: orange;
        }

        .left{
            float:left;
            width:2.3rem;
            background-color: #fff;
            height:100%;
        }
        .right{
            margin-left:2.3rem;
            height:100%;
            background-color: yellow;
            /* 只沿y轴方向溢出 */
            overflow-y:auto;
        }
        .content{
            height:4.38rem;
            background-color: purple;
            margin:.1rem;
        }
    </style>

 html:

<body>

    <header></header>
    <div class="main">
        <div class="left"></div>
        <div class="right">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
    </div>
    <footer></footer>
    
</body>

 

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址