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

程序员文章站 2022-06-08 16:37:04

...

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

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剩余空间会是红色区域