固定header和footer，中间main超出自动滚动条布局两种实现方式

最新推荐文章于 2023-04-03 17:26:59 发布

Just丶九月

最新推荐文章于 2023-04-03 17:26:59 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Silence_Sep/article/details/103527805

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

需求：
在这里插入图片描述

1.方式一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div class="header">
        header
      </div>
      <div class="main">
        <div>
          main
        </div>
      </div>
      <div class="footer">
        footer
      </div>
    </div>
  </body>
</html>

<style>
  .header {
     position: absolute;
     height: 60px;
     top: 0;
     right: 0;
     left: 0;
     background: #f00;
   }
   .main {
     position: absolute;
     top: 60px;
     bottom: 60px;
     right: 0;
     left: 0;
     overflow: auto;
     background: #00ff00;
   }
   .footer {
     position: absolute;
     height: 60px;
     bottom: 0px;
     right: 0;
     left: 0;
     background: #00f;
   }
 </style>

只需要设置

header: position:absolute  top:0 heigth:60px

footer: position:absolute   bottom:0 heigth:60px

main:position:absolute bottom:60px top: 60px

方式二

header: position:fixed  top:0 heigth:60px

footer: position:fixed   bottom:0 heigth:60px

main:position:absolute  top: 60px padding-bottom:60px

建议使用方式一，方式存在问题：如果main的背景色是红色，并且没有超出一屏，那么此时main剩余空间会是红色区域

Just丶九月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录