上下固定，中间滑动布局

最新推荐文章于 2021-06-09 20:56:05 发布

原创最新推荐文章于 2021-06-09 20:56:05 发布

· 240 阅读

2 ·

版权

文章标签：

#html5 #html #css #css3 #前端

css+html 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用Flex布局来创建页面结构的方法，使得头部和底部固定，中间内容区域可根据内容自动调整高度并具备滚动条。通过设置.container为flex布局，.content部分设置flex:1及overflow:auto，实现了上下固定、中间可滑动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上下固定，中间滑动布局

思路：利用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>

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