使用CSS3布局：header和footer固定在上下两端，中间body自适应上下伸展，超过一页时中间body内容上下滑动

喜欢ヅ旅行 2021-12-12 23:35 356阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fVGVyZW5jZQ_size_16_color_FFFFFF_t_70][]

<body>
        <header class="header">header高度固定86px</header>
        <section class="mainBox">
          <div class="leftBox">左侧自适应上下铺满</div> 
          <div class="rightBox">右侧自适应上下铺满，内容过量时右侧上下滚动即可
            <li v-for="item in 70">测试-----往下滑</li>
          </div>
          
        </section>
        <footer class="footer">@ footer固定高度40px</footer>
    </body>

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .header {
      width: 100%;
      height: 60px;
      position: absolute;
      top: 0;
      /*以上设置是重点必须的*/
      background: rgb(30, 75, 69);
      padding-left:50px;
      color: #fff;
      font-size:20px;
      line-height: 80px;
    }
    
    .footer {
      width: 100%;
      height: 60px;
      background: rgb(30, 75, 69);
      color: #fff;
      position: absolute;
      bottom: 0;
      /*以上设置是重点必须的*/
      text-align: center;
      line-height: 40px;
    }
    .mainBox {
      width: 100%;
      position: absolute;
      top: 60px;
      bottom: 60px;
      /*以上设置是重点必须的*/
      border:3px solid blue;
    }
    .mainBox .leftBox {
      height: 100%;
      width: 200px;
      float: left;
      margin-bottom: 40px;
      overflow: auto;
      /*以上设置是重点必须的*/
      border: 2px solid green;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }
    .mainBox .rightBox {
      height: 100%;
      margin-left: 0;
      /*以上设置是重点必须的*/
      border: 2px solid crimson;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: auto;
      text-align: left;
      line-height: 40px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5fVGVyZW5jZQ_size_16_color_FFFFFF_t_70]: /images/20211210/67c0b231ba844ba7a28f88d3a6a2df24.png

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例

原文网址：[CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介本

深藏阁楼爱情的钟/ 2023年10月02日 17:00/ 0 赞/ 26 阅读

相关 CSS3动画---移动端上下固定高度，中间自适应

问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示： ![在这里插入图片描述][watermark_type_

朱雀/ 2023年01月18日 04:13/ 0 赞/ 204 阅读

相关 css实现上中下布局（上下固定，中间自适应）

先上效果图： ![在这里插入图片描述][20210421001710245.gif] 实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数

深藏阁楼爱情的钟/ 2023年01月14日 14:58/ 0 赞/ 153 阅读

相关 CSS 实现两边固定中间自适应

1，flex 布局 .box{ height: 50px; width: 100%; display: flex;

悠悠/ 2023年01月13日 06:27/ 0 赞/ 262 阅读

相关上下布局高度自适应屏幕

要求上下布局：高度撑满整个屏幕 html <div class="layout"> <div class="header">111111<

偏执的太偏执、/ 2022年12月10日 02:26/ 0 赞/ 201 阅读

相关三栏布局——左右固定，中间自适应

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。这里将介绍两种方法，一种是使用margin值，另

Dear 丶/ 2022年06月12日 01:45/ 0 赞/ 301 阅读

相关使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类

淩亂°似流年/ 2022年06月07日 14:10/ 0 赞/ 340 阅读

相关经典布局：固定header和footer，中间main超出自动滚动条

效果 ![在这里插入图片描述][20190606165339901.gif] demo <!DOCTYPE html> <html lang="e

﹏ヽ暗。殇╰゛Y/ 2022年01月22日 15:03/ 0 赞/ 278 阅读

相关使用CSS3布局：header和footer固定在上下两端，中间body自适应上下伸展，超过一页时中间body内容上下滑动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE5f

喜欢ヅ旅行/ 2021年12月12日 23:35/ 0 赞/ 357 阅读

相关 css上下两栏布局（上栏固定下栏自适应）

1.效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

红太狼/ 2021年08月28日 18:17/ 0 赞/ 549 阅读