HTML / css сетка с фиксированным верхним и нижним колонтитулом - PullRequest
Новая
       7

HTML / css сетка с фиксированным верхним и нижним колонтитулом

0 голосов
/ 27 января 2020

Я пытаюсь создать фиксированный верхний и нижний колонтитулы, используя сетку. Я хочу, чтобы верхний колонтитул всегда был сверху, а нижний колонтитул всегда был снизу области просмотра. «Содержимое» должно быть pu sh сверху вниз и pu sh снизу вверх, чтобы компенсировать содержимое верхнего / нижнего колонтитула. И полосы прокрутки должны прокручивать область содержимого.

Когда я применяю position: fixed, а затем top: 0 к верхнему колонтитулу или bottom: 0 к нижнему колонтитулу, это нарушает компоновку сетки.

Это то, что я пробовал до сих пор: 

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 2 / 1 / 3 / 3;
}

.div4 {
  grid-area: 3 / 1 / 4 / 2;
}

.div5 {
  grid-area: 3 / 2 / 4 / 3;
}

.parent div {
  background-color: red;
  padding: 5px;
}

.div1,
.div2 {
  position: fixed;
  top: 0;
  height: 50px;
}

.div3 {
  padding: 50px 0 50px 0;
}

.div4,
.div5 {
  position: fixed;
  bottom: 0;
  height: 50px;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="parent">
    <div class="div1">a</div>
    <div class="div2">b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br /></div>
    <div class="div3">c</div>
    <div class="div4">d</div>
    <div class="div5">e</div>
  </div>
</body>

</html>

Что я делаю не так?

...