Как отобразить часть страницы после исправления верхнего и нижнего колонтитула - PullRequest
Новая
       22

Как отобразить часть страницы после исправления верхнего и нижнего колонтитула

0 голосов
/ 03 мая 2018

Я хочу отобразить свой веб-сайт на три части: верхний и нижний колонтитулы. Теперь я могу исправить свой верхний и нижний колонтитулы, но верхний колонтитул закрывает часть страницы, и страница не опускает нижний колонтитул (некоторое содержимое моей страницы отображается за нижним колонтитулом)

Код моего шаблона: 

<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;
}

Кто-нибудь знает, как решить эту проблему?

1 Ответ

0 голосов
/ 03 мая 2018

Добавьте отступы сверху и снизу .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>
...