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

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>

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

How to display the page part after fixing the header and the footer

html

css

header

footer