固定页眉和页脚后如何显示页面部分

Question

我想通过三个部分来显示我的网站：页眉、页面和页脚。现在我可以修复我的页眉和页脚，但是页眉屏蔽了页面的一部分并且页面不会放下我的页脚（我的页面的某些内容显示在我的页脚后面）

我的模板代码：

<div class="fixed-header">
  <...>
</div>

<div class="page">
  <...>
</div>

<div class="fixed-footer">
  <...>
</div> 

我的 CSS 是：

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%  !important;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

有人知道如何解决这个问题吗？

Answer 1

在 .page 的顶部和底部添加填充

.page {
  padding-top: x // height of header
  padding-bottom: x // height of footer
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background: red;
  width: 100% !important;
  height: 20px;
}

.fixed-footer {
  background: blue;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  height: 20px;
}

.page {
  margin: 20px 0;
  background: pink;
  width: 100px;
}

@media (max-width: 767px) {
  .fixed-header, .fixed-footer {
    height: 40px;
  }
  
.page {
  margin: 40px 0;
  }
}

<div class="fixed-header">
  <...>
</div>

<div class="page">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi odio, est rerum quod nisi ipsam laboriosam quam eius doloremque exercitationem. Laboriosam aut consequatur atque natus beatae explicabo sunt. Quam, labore.
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi odio, est rerum quod nisi ipsam laboriosam quam eius doloremque exercitationem. Laboriosam aut consequatur atque natus beatae explicabo sunt. Quam, labore.
</div>

<div class="fixed-footer">
  <...>
</div>