Как сделать footer: Как с помощью CSS прижать footer к низу окна браузера

  </p>

</div>

Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.

Сохраните оба файла и перезагрузите веб-страницу в браузере. В левой части закрепленного футера появится три пункта меню: home, about и credits. При наведении на них фон будет менять свой цвет на желтый.

Добавление значков социальных сетей

Давайте добавим в наш футер значки социальных сетей, которые можно использовать для ссылки на свои учетные записи. Если вы хотите использовать значки для других соцсетей, вы можете найти их бесплатные логотипы в Интернете и загрузить их в папку images, а затем добавить на свою страницу. Откройте styles.css и вставьте следующие три набора правил в конец файла:

. . .

.footer-content-right {

  padding-right:40px;

  margin-top:20px;

  float:right;

}

. icon-style {

  height:40px;

  margin-left:20px;

  margin-top:5px;

}

.icon-style:hover {

  background-color:yellow;

  padding:5px;

}

Остановимся на этих правилах подробнее:

• Первый набор правил определяет класс footer-content-right и присваивает определенные значения его внутренним полям, внешним отступам и выравниванию (padding, margin и float соответственно). Этот набор правил нужен для стилизации элемента <div>, который будет содержать значки социальных сетей.
• Второй набор создает класс icon-style, который задает высоту и внешние поля для значков социальных сетей, учитывая их размер и расположение.
• Третий набор правил использует псевдокласс hover, что изменит цвет фона значка на желтый при наведении курсора.

Сохраните файл styles.css. Теперь давайте добавим значки в футер. Вернитесь в свой файл index.html и добавьте следующий фрагмент кода после последнего закрывающего тега </a>:

...

<div>

  <a href="https://www.8host.com/blog/"><img src="images/github.jpeg" alt="Github icon"></a>

  <a href="https://www.8host.com/blog/"><img src="images/twitter.jpeg" alt="Twitter icon"></a>

  <a href="https://www.8host.com/blog/"><img src="images/email.jpeg" alt="Emailicon"></a>

</div>

 Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.

Этот фрагмент кода создает контейнер <div>, которому присваивается класс footer-content-right. Внутри этого контейнера div находятся три значка социальных сетей, вставленные с помощью HTML-тега <img>; с помощью тега HTML <a> каждое изображение поддерживает ссылку на соответствующую соцсеть.

Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.

Сохраните файл index.html и перезагрузите его в браузере. Теперь на вашей странице должен быть зафиксированный футер, содержащий в правой части ссылки на ваши социальные сети. Ссылки должны менять цвет фона при наведении на них курсора.

Заключение

Мы добавили статический футер, который всегда отображается в нижней части области просмотра, когда посетитель прокручивает страницу вниз. Вы можете продолжить изучение возможностей CSS, изменив значения в созданных нами классах или добавив в файл index.html новый контент.

Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.

CSS можно изучать бесконечно, но описанные в этой серии методы обеспечат вам прочную основу для развития ваших навыков работы с CSS и подготовят вас к изучению других инструментов (таких как JavaScript) и фреймворков (как, к примеру, Tailwind). Также у вас теперь есть все файлы и папки, необходимые для развертывания готового веб-сайта в облаке.

Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать:

• Персонализируйте текстовый и графический контент на вашем сайте. Если вам нужно освежить в памяти, как работать с изображениями, читайте туториалы Добавление изображения на веб-страницу с помощью HTML или Стилизация изображений CSS.
• Создайте новые веб-страницы и ссылки. Сделать это вам поможет наше руководство Добавление страниц сайта с помощью HTML
• Добавьте фавикон с помощью этого мануала.
• Изучите блоковую модель CSS и научитесь работать с ее компонентами по статьям Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов и Создание плиточного макета с помощью CSS.
• Измените порядок разделов вашего тестового веб-сайта, отредактируйте классы для оформления этих разделов.
• Измените фоновое изображение <body>.
• Измените цвет фона, используемый в различных элементах <div>, поработайте над цветовой палитрой сайта.

html — Как прижать footer к низу страницы

<html>
<head>  
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
<title>1</title>
</head>
<body>
<div>    <!--  Контейнер сайта  -->
<div>      <!--    Шапка  -->
    <div>
        <ul>
                <li>
                    <a href="#">Стpаница 1</a>
                </li>
                <li>
                    <a href="#">Стpаница 2</a>
                </li>
                <li>
                    <a href="#">Стpаница 3</a>
                </li>
                <li>
                    <a href="#">Стpаница 4</a>
                </li>
        </ul>
    </div>
 <div>  <!-- /-- Основной контент левой колонки--/ -->
        <div>  <!-- /-- Логотип --/ -->
            <a href="#"> 
                <img src="images/logo. png">
            </a> 
        </div>
<nav>   <!-- /-- Начало навигации --/ -->
            <ul>
                <li><a href="#">Категория</a>
                    <ul>
                        <li><a href="#">Подменю #1</a></li>
                        <li><a href="#">Подменю #2</a></li>
                        <li><a href="#">Подменю #3</a></li>
                        <li><a href="#">Подменю #4</a></li>
                    </ul>
                    <li><a href="#">Категория 1</a></li>
                    <li><a href="#">Категория 2</a></li>
                    <li><a href="#">Категория 3</a></li>
                    <li><a href="#">Категория 4</a></li>
                </li>
            </ul>
</nav>                      <!-- /-- Конец навигации --/ -->
        <div>
            <h3>Последние записи</h3>
        </div>
    <div></div>      <!-- /-- Пустое место --/ -->
    <div>           <!-- /-- Левая информационная колонка --/ -->
        <a href="#">
            <img src="images/tumb. png">
        </a>
        <h4>
            <a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a>
        </h4>
        <div>
        Александр //<a href="#">Метки: метка, метка 2</a>// Апр.10.2012. // Комментариев:<a href="#">238</a>
        </div>
        <div>
        <p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p>
        </div>
        <div><a href="#">Далее</a></div>
    </div>  
    <div></div>
</div>
  <aside>         <!-- /-- Правая панель ссылок --/ -->
        <form  method="get" action="/search" target="_blank">
        <input name="q" value="" placeholder="Поиск. .."> 
        <input type=submit value="">
        </form>
        <div>
            <h4>Виджет 1</h4>       
            <ul>    
                <li>
                    <a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a>
                </li>
                <li>
                    <a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a>
                </li>
        <li>
                    <a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a>
                </li>
        <li>
                    <a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a>
                </li>
    </ul>  
    </div>
      </aside>   
  <footer>  
    <div>
        <div>
            <img src="images/logo. png">
        </div>
        <nav>
            <ul>
                <li>
                    <a href="#">Станица 1</a>
                </li>
                <li>
                    <a href="#">Станица 2</a>
                </li>
                <li>
                    <a href="#">Станица 3</a>
                </li>
                <li>
                    <a href="#">Станица 4</a>
                </li>
            </ul>
        </nav>
    </div>  
</footer>
</body>
</html>
html {
    margin:0px;
    padding:0px;
    height:100%;
}
body {
    width: 100%;
    height: 100%;
    color:#333;
    background: #fff; 
    font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:0.94em;
    line-height:135%;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
}
#container{
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    height: 100%;
}
#header{
    width:100%;
    height:57px;
    background:#0dbfe5;
}
. container{
    margin-left:40px;
    min-height:100%;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}
a:hover{
    text-align:center;
    background: #fff;
}
li{
    display:inline-block;
}
#main-navigation, #main-navigation li{
    margin:0;
    padding: 0;
}
#main-navigation{
    background:#0dbfe5;
}
#main-navigation ul{
    overflow:hidden;
}
#main-navigation li{
    float:left;
    text-align: center;
}
#main-navigation a{
    border-left:1px solid #adadad;
    display:block;
    color:#d7d4d4;
    text-decoration:none;
    padding:19px 20px 18px 20px;
}
.net-block{
}
.wrapper{
    width:1200px;
    margin-right:40px;
    min-height:100%;
}
.logo{
    width:141px;
    height:47px;
    margin-top:33px;
    margin-bottom:42px;
    margin-left:40px;
}
.bottom_menu{
    margin-left:40px;
    width:1200px;
    height:70px;
    left:0px;
    bottom:0px;
    display:inline-block;
}
#dropdown_nav, #dropdown_nav li{
    margin:0;
    padding:0;
    font-weight:bold;
    display:inline-block;
    list-style:none;
    border-bottom:0px solid #777;
    margin-top:18px;
}
#dropdown_nav{
    background:#323232;
    width:1200px;
}
#dropdown_nav li{
    display:inline-block;
    float:left;
    position:relative;       
}
#dropdown_nav a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:5px 22px 20px 22px;
    font-weight:100;
    font-size:18px;
    /*background: url(images/linemenu. png) right no-repeat;*/
}
#dropdown_nav li a:hover {
    background: #000;
    text-decoration:none;
    color:#0dbfe5;
}
#dropdown_nav li:hover>.sub-menu{
    display:block;
}
#dropdown_nav .sub-menu{
    z-index: 4;
    width:150px;
    padding:0px;
    position:absolute;
    top:42px;
    left:0px;
    border:0px solid #ddd;
    border-top:none;
    background: #000;
    display:none;
}
#dropdown_nav .sub-menu li{            
    width:150px;
    padding:0px;
}
#dropdown_nav .sub-menu li a {
    background: none;
    font-weight: normal;
    font-size:15px;
    display:block;
    border-bottom:0px solid #e5e0b3;
    padding-left:10px;
    color:#fff; 
}
#dropdown_nav .sub-menu li a:hover {
    background:#222;
    color:#0dbfe5;
    text-align:left;
}
.content{
    width:1200px;
    height:103px;
    background:#eeeeee;
    margin-left:40px;
    margin-top:-10px;
    text-align:center;
}           
h3{
    text-align:center;
    padding-top:40px;
}
.middle{
    width:1200px;
    height:46px;
    background:#fff;
    border:0px solid #e5e0b3;
    margin-left:40px;
}
. postbox{
    border:0px solid #333;
    background: #fff;
    width:700px;
    margin-top:0px;
    margin-left:40px;
    margin-bottom:50px;
    float:left;
}
.postbox h4 a{
    font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
    color:#000;
    font-style:normal;
    font-weight:100;
    font-size:33px;
}
.postbox h4 a:hover{
    color:#0dbfe5;
}
.postbox info{
    margin-bottom:17px;
    margin-top:20px;
    color:#999;
    font-weight:100;
    font-size:14px;
}
.postbox info a{
    color:#777;
}
.postbox info a:hover{
    color:#4991bb;
}
.postbox text{
    border:0px solid #333;
    width:700px;
    margin-bottom:30px;
}
.postbox text p{
    margin-top:0;
}
.bottom-next a{
     background:#0dbfe5;
     color: #fff;
     font-size: 17px; 
     width: 100px;
     border-radius: 3px;
     text-align:center;
     padding:6px 25px 9px 25px;
}
.bottom-next a:hover{
    background:#000;
    color:#0dbfe5;
}
.raz{
    margin:0 auto;
    border:0px solid #333;
    background: #fff;
    width:116px;
    height:29px;
    margin-bottom:20px;
}
#colRight{
    float:right;
    width:350px;
    height:100%;
    position:relative;
    margin-left:70px;
    margin-top:0px;
    margin-right:20px;
}
#form-query {
    background:#eeeeee;
    border:0px solid #e4e4e4;
    width:350px;
    height:31px;
    padding:8px 10px 7px;
    font-weight:100;
    font-size:18px;
    color:#000;
    margin-bottom: 20px;
    margin-top:0px;
}
#form-querysub {
    position:absolute;
    right:7px;
    top:7px;
    width:17px;
    height:17px;
    background:#d7d7d7;
    border:0px dashed #333;
}
#form-querysub:hover {
    cursor: pointer;
}
. rightBox h4{
    background:#d7d7d7;
    border:1px solid #e1e3e3;
    padding:10px;
    margin-bottom:0px;
}
.rightBox{
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
}
.rightBox li{
    background:#fff;
    border-top:1px solid #e1e3e3;
    padding:10px 0px;
}
.rightBox ul{
    background:#fff;
    border-top:0px solid #e1e3e3;
    padding:10px 0px;
}
.rightBox li:first-child {
    border-top:none;
}
.rightBox a {
    color:#333;
}
.rightBox a:hover {
    color:#0dbfe5;
}
.clear {
    clear: both;
}
#footer {
    margin-top:50px;
    height:100px;
    width:100%;
    background: #0dbfe5;
}
.footerInner {
    position:relative;
    border:0px solid #000;
    width:1200px;
    margin:-50px;
    height:100px;
}

Footer находится посередине страницы и никуда не двигается. Подскажите, пожалуйста, в чем проблема?

• html
• css

1

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

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
}
main {
  padding-bottom: 100px;
  /*Высота футера*/
}
footer {
  margin-top: -100px;
  /*Минус Высота футера*/
  height: 100px;
  /*Высота футера*/
}

<div>
  <header>
    <p>Содержимое заголовка</p>
  </header>

  <main>
    <p>Основное содержимое</p>
  </main>
</div>

<footer>
  <p>Содержимое подвала</p>
</footer>

Такая разметка предполагает, что все содержимое страницы хранится внутри блока div с id = wrap, а все содержимое футера в блоке footer. Блок header здесь необязателен (предполагается, что в нем хранится шапка страницы, например, меню). Блок main обязателен.

Также вы можете заменить footer, main, #wrap на блоки div или другие элементы, но потребуется поправить стиль.

Если вас устраивает main, #wrap, footerr, имейте в виду, что в браузере IE < 9 потребуется подключить скрипт html5shiv, поскольку старые IE не понимают теги html5

0

Можно прижать с помощью флексбокс, тогда высота футера может быть разной, а верстка соответственно адаптивной:

* {
  margin: 0;/*это свойство можно удалить, если вы используете reset, normalize или нечто подобное*/
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  
  padding: 1rem;/*это свойство можно удалить, добавлено для наглядности*/
  background: #e6f2ff;/*это свойство можно удалить, добавлено для наглядности*/
}

footer {
  flex: 0 0 auto;
  
  padding: 1rem;/*это свойство можно удалить, добавлено для наглядности*/
  background: #e6ffe6;/*это свойство можно удалить, добавлено для наглядности*/
}

<body>
  <div>content</div>
  <footer>footer</footer>
</body>

Пробовал сделать это различными способами. В случае, если контента немного, футер действительно можно зафиксировать в нижней части страницы. Но когда контекст не помещается на странице, футер все равно «выдавливается» за нижний край страницы. Решил это следующим образом:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Тестовая страница</title>
<link href="Test.css" rel="stylesheet" type="text/css">
</head>
    <div>
        <div>
         </div>
         <div>
            <p>
                  Здесь нужно разместить длинный текст
            </p>
        </div>
         <div>  
        </div>
    </div>
<body>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
* {
  margin: 0; /*Сбрасываем настройки браузера*/
}
.wrap {
  position:fixed; /*Отсоединяем контейнер от страницы и фиксируем в окне браузера*/
  width: 100%;   /*Ширина на все окно браузера*/
  height: 100%;  /*Высота на все окно браузера*/
  background-color: pink;
  display: flex; /*Превращаем контейнер в flexBox*/
  flex-direction: column; /*Расставляем дочерние элементы по вертикали*/
}
. header{
  height: 32px;
  background-color: burlywood;  
  flex-grow: 0; /*Запрещаем увеличиваться*/
  flex-shrink: 0; /*Запрещаем сжиматься*/
  flex-basis: auto;  
}
  .content {
    background-color: aliceblue;
    overflow-y:auto; /*Вертикальная полоса прокрутки для текста*/
    padding: 10px; /*отступы текста со всех сторон*/
    text-align: justify; /*выравнивание текста по левому и правому краям*/     
    flex-grow: 1; /*Предписываем занять все свободное пространство*/
}
.footer {
  height: 32px;
  background-color: cadetblue;  
  flex-grow: 0; /*Запрещаем увеличиваться*/
  flex-shrink: 0; /*Запрещаем сжиматься*/
  flex-basis: auto;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как прижать footer к низу экрана?

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute. Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

body {
  min-height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
}

.content {
  /* Занять всё оставшееся пространство */
  flex-grow: 1;
  
  border: 1px dotted red;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer:

body {
  min-height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
}

.content {
  border: 1px dotted red;
}

footer {
  /* Опустить в самый низ */
  margin-top: auto;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

• min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.

• Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex. Установите flex-shrink в 0 (вместо значения по умолчанию 1) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

body {
  height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
}

header,
footer {
  flex-shrink: 0;
}

.content {
  /* Занять всё оставшееся пространство */
  flex-grow: 1;
  
  border: 1px dotted red;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Если надо чтобы был отступ от контента:

body {
  height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
}

header,
footer {
  flex-shrink: 0;
}

. content {
  border: 1px dotted red;
}

footer {
  /* Опустить в самый низ */
  margin-top: auto;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Случай с контентом на всю оставшуюся высоту:

body {
  height: 100vh;
  margin: 0;
  
  display: grid;
  
  /* задаём высоту строк */
  grid-template-rows: auto 1fr auto;
}

.content {
  border: 1px dotted red;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer:

body {
  min-height: 100vh;
  margin: 0;

  display: grid;

  /* задаём высоту строк */
  grid-template-rows: auto 1fr auto;
}

. content {
  /* кладём элемент в начало ячейки по вертикали */
  /* чтобы его высота была равна высоте контента */
  align-self: start;
  
  border: 1px dotted red;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto, тогда как в IE -ms-grid-row : 1 и -ms-column: 1, поэтому если номер строки или стоблца элемента не совпадают с 1, то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas, grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

body {
  height: 100vh;
  margin: 0;

  display: -ms-grid;
  display: grid;

  /* по умолчанию в IE размер ячеек равен содержимому, */
  /* тогда как в других браузерах размер ячеек растягивается */
  /* под свобоодное пространство grid-контейера */
  -ms-grid-columns: 100%;

  /* задаём высоту строк */
  -ms-grid-rows: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
}

.content {
  /* явно прописываем номер строки, когда она не равна 1 */
  -ms-grid-row: 2;
  
  border: 1px dotted red;  
}

footer {
  /* явно прописываем номер строки, когда она не равна 1 */
  -ms-grid-row: 3;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer:

body {
  height: 100vh;
  margin: 0;

  display: -ms-grid;
  display: grid;

  /* по умолчанию в IE размер ячеек равен содержимому, */
  /* тогда как в других браузерах размер ячеек растягивается */
  /* под свобоодное пространство grid-контейера */
  -ms-grid-columns: 100%;

  /* задаём высоту строк, разные имена свойств */
  -ms-grid-rows: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
}

. content {
  /* явно прописываем номер строки, когда она не равна 1 */
  -ms-grid-row: 2;
  
  /* кладём элемент в начало ячейки по вертикали */
  /* чтобы его высота была равна высоте контента */
  -ms-grid-row-align: start;
  align-self: start;
  
  border: 1px dotted red;  
}

footer {
  /* явно прописываем номер строки, когда она не равна 1 */
  -ms-grid-row: 3;
}

.content {
  -ms-grid-row: 2;

  
  border: 1px dotted red;
}

footer {
  -ms-grid-row: 3;
}

<header>
  header
</header>
<div>
  content
</div>
<footer>
  footer
</footer>

Как сделать нижний колонтитул в HTML