Фиксированный верхний колонтитул, нижний колонтитул с прокручиваемым содержимым

Question 1

Как получить фиксированный верхний колонтитул, нижний колонтитул с прокручиваемым содержимым? Что-то вроде этой страницы . Я могу посмотреть исходный код, чтобы получить CSS, но я просто хочу знать минимум CSS и HTML, который мне нужен, чтобы это работало.

Question 2

Что-то вроде этого

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

Question 3

Если вы ориентируетесь на браузеры, поддерживающие гибкие блоки, вы можете сделать следующее .. http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Обновление:
См. «Могу ли я использовать» для получения информации о поддержке гибких ящиков браузером .

Question 4

Подход 1 - flexbox

Он отлично подходит как для известных, так и для неизвестных элементов высоты. Обязательно установите для внешнего div значение height: 100%;и сбросьте значение marginпо умолчанию body. См. Таблицы поддержки браузеров .

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

Подход 2 - таблица CSS

Как для известных, так и для неизвестных высотных элементов. Он также работает в устаревших браузерах, включая IE8.

jsFiddle

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

Развернуть фрагмент

Подход 3 - `calc()`

Если верхний и нижний колонтитулы имеют фиксированную высоту, вы можете использовать CSS calc().

jsFiddle

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

Подход 4 -% для всех

Если высота верхнего и нижнего колонтитула известна и они также выражены в процентах, вы можете просто выполнить простую математику, сложив их вместе со 100% высотой.

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

jsFiddle

Question 5

Теперь у нас есть CSS-сетка. Добро пожаловать в 2019 год.

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

Развернуть фрагмент

Question 6

По состоянию на 2013 год: это был бы мой подход. jsFiddle:

HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>

SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Question 7

Вот что у меня сработало. Мне пришлось добавить нижний край, чтобы нижний колонтитул не съел мой контент:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

Question 8

У меня он отлично работает с сеткой CSS. Сначала исправьте контейнер, а затем отдайте его overflow-y: auto;для содержимого центра, которое нужно прокрутить, то есть кроме верхнего и нижнего колонтитула.

.container{
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 5em auto 3em;
}

header{
   grid-row: 1;  
    background-color: rgb(148, 142, 142);
    justify-self: center;
    align-self: center;
    width: 100%;
}

.body{
  grid-row: 2;
  overflow-y: auto;
}

footer{
   grid-row: 3;
   
    background: rgb(110, 112, 112);
}

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <footer><h3>Footer</h3></footer>
</div>

Развернуть фрагмент

Answer 1

87

Как получить фиксированный верхний колонтитул, нижний колонтитул с прокручиваемым содержимым? Что-то вроде этой страницы . Я могу посмотреть исходный код, чтобы получить CSS, но я просто хочу знать минимум CSS и HTML, который мне нужен, чтобы это работало.

html css РКП
источник

1

тот же вопрос с этими квалификаторами: angular, материализовать ...

mobibob

тот же вопрос, но с боковой панелью И, где нижний колонтитул не отображается, пока вы не прокрутите вниз, И вы не получите две полосы прокрутки с правой стороны

Simon_Weaver

Answer 2

1

тот же вопрос с этими квалификаторами: angular, материализовать ...

mobibob

Answer 3

тот же вопрос, но с боковой панелью И, где нижний колонтитул не отображается, пока вы не прокрутите вниз, И вы не получите две полосы прокрутки с правой стороны

Simon_Weaver

Answer 4

132

Что-то вроде этого

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

Джон Хартсок
источник

Не связано с отрицательными голосами, но я попал сюда, и это не сработало для меня (и я буквально скопировал стиль). Наверное, jQuery Mobile балуется. Но даже если бы это сработало, я не люблю жестко фиксировать фиксированные размеры. Думаю, HTML / css - это шаг вперед по сравнению с собственными компонентами пользовательского интерфейса. На каждой нативной платформе, с которой я работал, создание прокручиваемых контейнеров было простым делом.

Mister Smith

@MisterSmith Извините, я явно забыл добавить стиль для блокировки правой стороны контейнеров. Вдобавок этот код будет отображать только размер своего контейнера. Если он находится под тегом body и вам нужен полноэкранный режим, вам необходимо установить высоту и ширину на 100%. Наконец, что касается жестко запрограммированных стилей, это всего лишь пример, а не для производственной версии. Я бы ни за что не стал выпускать подобные встроенные стили, но это казалось более подходящим способом объяснить ответ.

John Hartsock

@JohnHartsock Определенно JQM делает плохие вещи. Что касается жестко запрограммированных размеров, то мне не нравится устанавливать абсолютную высоту в пикселях. На других платформах, с которыми я работал, можно было создать контейнер и указать ему использовать всю необходимую высоту.

Mister Smith

@ Мистер Смит. Вам не нужно жестко указывать размеры в пикселях. Вы можете использовать проценты, если хотите, кроме того, вам не нужно устанавливать стиль с помощью атрибута style в теге, а вместо этого просто настроить таблицу стилей css, ссылающуюся на идентификаторы. Я просто сделал это в ответе, чтобы его было очень легко понять.

Джон Хартсок, 01

2

@JohnHartsock отрицает, вероятно, потому, что это встроенный css и не объясняет, почему это просто ответ «скопируйте и вставьте»

treyBake

Answer 5

Не связано с отрицательными голосами, но я попал сюда, и это не сработало для меня (и я буквально скопировал стиль). Наверное, jQuery Mobile балуется. Но даже если бы это сработало, я не люблю жестко фиксировать фиксированные размеры. Думаю, HTML / css - это шаг вперед по сравнению с собственными компонентами пользовательского интерфейса. На каждой нативной платформе, с которой я работал, создание прокручиваемых контейнеров было простым делом.

Mister Smith

Answer 6

@MisterSmith Извините, я явно забыл добавить стиль для блокировки правой стороны контейнеров. Вдобавок этот код будет отображать только размер своего контейнера. Если он находится под тегом body и вам нужен полноэкранный режим, вам необходимо установить высоту и ширину на 100%. Наконец, что касается жестко запрограммированных стилей, это всего лишь пример, а не для производственной версии. Я бы ни за что не стал выпускать подобные встроенные стили, но это казалось более подходящим способом объяснить ответ.

John Hartsock

Answer 7

@JohnHartsock Определенно JQM делает плохие вещи. Что касается жестко запрограммированных размеров, то мне не нравится устанавливать абсолютную высоту в пикселях. На других платформах, с которыми я работал, можно было создать контейнер и указать ему использовать всю необходимую высоту.

Mister Smith

Answer 8

@ Мистер Смит. Вам не нужно жестко указывать размеры в пикселях. Вы можете использовать проценты, если хотите, кроме того, вам не нужно устанавливать стиль с помощью атрибута style в теге, а вместо этого просто настроить таблицу стилей css, ссылающуюся на идентификаторы. Я просто сделал это в ответе, чтобы его было очень легко понять.

Джон Хартсок, 01

Answer 9

2

@JohnHartsock отрицает, вероятно, потому, что это встроенный css и не объясняет, почему это просто ответ «скопируйте и вставьте»

treyBake

Answer 10

63

Если вы ориентируетесь на браузеры, поддерживающие гибкие блоки, вы можете сделать следующее .. http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

Обновление:
См. «Могу ли я использовать» для получения информации о поддержке гибких ящиков браузером .

Meyertee
источник

Я использую верхний и нижний колонтитулы с переменной высотой, и я считаю, что это поможет мне. К счастью, я также ориентируюсь на последние версии браузеров. Спасибо!

Джимми Тиррелл

Большой! Есть ли способ поставить еще одну такую конструкцию в этом .bodyрайоне? Когда я это делаю, внешняя прокрутка .containerисчезает из поля зрения, как только внутренняя .body .bodyпрокручивается полностью вниз.

philk

1

На мой взгляд, это лучший ответ, и это должен быть лучший ответ! Спасибо!

Объединить

Если не ошибаюсь, это ответ на другой вопрос? Здесь полоса прокрутки отображается на всей странице, тогда как в ответе Джона полоса прокрутки появляется только в основном содержимом (что и задается вопросом)? По крайней мере, это то, что я вижу на скрипке.

bersling

Answer 11

Я использую верхний и нижний колонтитулы с переменной высотой, и я считаю, что это поможет мне. К счастью, я также ориентируюсь на последние версии браузеров. Спасибо!

Джимми Тиррелл

Answer 12

Большой! Есть ли способ поставить еще одну такую конструкцию в этом .bodyрайоне? Когда я это делаю, внешняя прокрутка .containerисчезает из поля зрения, как только внутренняя .body .bodyпрокручивается полностью вниз.

philk

Answer 13

1

На мой взгляд, это лучший ответ, и это должен быть лучший ответ! Спасибо!

Объединить

Answer 14

Если не ошибаюсь, это ответ на другой вопрос? Здесь полоса прокрутки отображается на всей странице, тогда как в ответе Джона полоса прокрутки появляется только в основном содержимом (что и задается вопросом)? По крайней мере, это то, что я вижу на скрипке.

bersling

Answer 15

Подход 1 - flexbox

Он отлично подходит как для известных, так и для неизвестных элементов высоты. Обязательно установите для внешнего div значение height: 100%;и сбросьте значение marginпо умолчанию body. См. Таблицы поддержки браузеров .

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

Подход 2 - таблица CSS

Как для известных, так и для неизвестных высотных элементов. Он также работает в устаревших браузерах, включая IE8.

jsFiddle

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

Развернуть фрагмент

Подход 3 - `calc()`

Если верхний и нижний колонтитулы имеют фиксированную высоту, вы можете использовать CSS calc().

jsFiddle

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

Подход 4 -% для всех

Если высота верхнего и нижнего колонтитула известна и они также выражены в процентах, вы можете просто выполнить простую математику, сложив их вместе со 100% высотой.

Показать фрагмент кода

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Развернуть фрагмент

jsFiddle

Answer 16

Теперь у нас есть CSS-сетка. Добро пожаловать в 2019 год.

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

Развернуть фрагмент

Answer 17

1

Вам не нужен рост. Просто установите высоту обертки на 100vh, и она будет работать как здесь, так и на дикой природе.

Энрике Эрзингер

Answer 18

По состоянию на 2013 год: это был бы мой подход. jsFiddle:

HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>

SCSS

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Answer 19

С 2016 года я бы, вероятно, использовал flex-box. Однако это всегда зависит от контекста. Сложные ситуации! :)

sheriffderek

Answer 20

Вот что у меня сработало. Мне пришлось добавить нижний край, чтобы нижний колонтитул не съел мой контент:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

Answer 21

У меня он отлично работает с сеткой CSS. Сначала исправьте контейнер, а затем отдайте его overflow-y: auto;для содержимого центра, которое нужно прокрутить, то есть кроме верхнего и нижнего колонтитула.

.container{
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 5em auto 3em;
}

header{
   grid-row: 1;  
    background-color: rgb(148, 142, 142);
    justify-self: center;
    align-self: center;
    width: 100%;
}

.body{
  grid-row: 2;
  overflow-y: auto;
}

footer{
   grid-row: 3;
   
    background: rgb(110, 112, 112);
}

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <footer><h3>Footer</h3></footer>
</div>

Развернуть фрагмент

Фиксированный верхний колонтитул, нижний колонтитул с прокручиваемым содержимым

Ответы:

Подход 1 - flexbox

Подход 2 - таблица CSS

Подход 3 - calc()

Подход 4 -% для всех

Подход 3 - `calc()`