上下固定，中间滑动布局

疯狂踩坑人

于 2021-01-31 11:52:39 发布

阅读量179

点赞数

分类专栏： css+html 文章标签： html5 html css css3 前端

本文链接：https://blog.csdn.net/java_tang_shi_wen/article/details/113464275

版权

css+html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上下固定，中间滑动布局

思路：利用flex布局把中间撑开，再给中间加上overflow: auto;

代码：

<style>
    html,body{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        height: 100%;
    }
    .container{
        height: 100%;
        background-color: #b2b2b2;
        display: flex;
        flex-direction: column;
    }
    .header{
        height: 80px;
        background-color: salmon;
    }
    .content{
        flex: 1;
        background-color: sandybrown;
        overflow: auto; 
        /* 一般不显示滚动条，仅当内容显示不下时显示滚动条 */

    }
    .footer{
        height: 80px;
        background-color: salmon;
    }
</style>

<body>
  <div class="container">
    <div class="header">我是头部</div>
    <div class="content">
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
      <p>这是内容。。。</p>
    </div>
    <div class="footer">我是脚部</div>
  </div>
</body>

效果：
在这里插入图片描述

疯狂踩坑人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
上下固定，中间滑动布局

上下固定，中间滑动布局思路：利用flex布局把中间撑开，再给中间加上overflow: auto;代码：<style> html,body{ padding: 0; margin: 0; box-sizing: border-box; height: 100%; } .container{ height: 100%; background-color: #b2b2b2;
复制链接

扫一扫