Исправлен заголовок, прокручиваемый контент, исправлена ​​раскладка нижнего колонтитула

Question

Я создал пример того, чего я хочу достичь ниже.Он использует position: fixed для верхней и нижней полос.Но я бы хотел, чтобы он был внутри сетки CSS (я не хочу использовать поля для верхнего и нижнего колонтитула, я также не хочу добавлять скрытые элементы div), возможно ли это?

* {
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #aaaaaa;
}

main {
  margin-top: 100px;
  margin-bottom: 50px;
  background-color: #dddddd;
  overflow: scroll;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #444444;
}

<header>Header</header>
<main>
  Main start
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main inside
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main end
</main>
<footer>Footer</footer>

https://codepen.io/stpoa/pen/zyPqaq

Answer 1

Вам не нужно position: fixed.Вы можете заставить макет работать только со свойствами сетки.

body {
  display: grid;
  grid-template-rows: 100px 1fr 50px;
  height: 100vh;  
  margin: 0;
}

main {
  overflow: auto;
}

header { background-color: #aaaaaa; }
main   { background-color: #dddddd; }
footer { background-color: #444444; }

<header>Header</header>
<main>
  Main start<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>  
  Main end
</main>
<footer>Footer</footer>