Question

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

我的模板代码：

nil

我的Css是：

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

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

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

任何人都知道如何解决这个问题？

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>

如何在修复页眉和页脚后显示页面部分

1 个答案: