Как прижать футер к низу страницы?

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Если вы верстаете страницу с нуля или берёте уже готовый шаблон, то в большинстве случаев если на странице мало контента, то вы видите такую картину:

футер не прижимается к низу

Я не знаю почему, но даже в большинстве премиумных тем и шаблонов есть данная проблема и её приходится решать, так как  не прижатый футер посередине страницы и куча пустого места снизу выглядят как то не очень хорошо.

Для того чтобы прижать  футер  сайта к низу страницы существует несколько способов.

Обучение фотошоп

Способ 1. При помощи CSS-свойства min-height

Данный способ является не очень красивым с точки зрения написания кода, но он очень простой, быстрый и довольно эффективный.

Заключается он в том, что нам нужно вычислить класс или идентификатор  блока с контентом, а затем задать для него минимальную высоту в единицах vh

Помимо пикселей em и процентов мы так же можем использовать vh – это условные единицы высоты экрана устройства (в чём то схожие с процентами но проще в использовании)

Выглядеть это будет так:

.content { min-height: 75vh; }

.content {

min-height: 75vh;

}

Вместо .content будет название вашего класса или идентификатора,

Вместо 75vh вам нужно будет поставить своё значение, которое наилучшим образом подойдёт для вашей страницы.

Высота всего экрана равна 100vh.

 

Вы наверное подумали: «А почему бы не  использовать задание высоты в обычных процентах?»

Можно и так, но высота в процентах для определённого блока сработает только тогда, когда задана высота в процентах для всех родительских элементов этого блока, включая body и html

Это значительно увеличивает объём дописываемого кода и затрачиваемое время.

Способ 2. Абсолютное позиционирование

Это классический способ прижать футер сайта к низу страницы. Заключается он в том, что вам нужно задать для блока с контентом и его родительских блоков минимальную высоту 100%, а затем для футера  сайта задать  отрицательный отступ сверху, который равен высоте футера. Получится, что он будет как бы налазить поверх блока с контентом.

прижать футер к низу страницы

В то же время текст блока с контентом будет закрываться футером, поэтому для него нужно будет задать нижний внутренний отступ

Если у Вас вёрстка с примерно следующей структурой:

<div> <div class=”header”> Шапка сайта </div> <div class=”content”> Блок с контентом </div> <div class=”footer”> Подвал сайта </div> </div>

<div>

  <div class=”header”>

    Шапка сайта

  </div>

 

  <div class=”content”>

    Блок с контентом

  </div>

 

  <div class=”footer”>

    Подвал сайта

  </div>

</div>

То CSS свойства нужны следующие:

html, body { height: 100%; } #main { position: relative; min-height: 100%; padding-bottom: 150px;  /*нижний внутренний отступ, равный высоте футера*/ } .footer { width: 100%; position: absolute; height: 150px;   /* Высота футера */ bottom: 0; &nbsp; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

html, body {

height: 100%;

}

 

#main {

position: relative;

min-height: 100%;

padding-bottom: 150px;  /*нижний внутренний отступ, равный высоте футера*/

}

 

.footer {

width: 100%;

position: absolute;

height: 150px;   /* Высота футера */

bottom: 0;

&nbsp;

}

Этот способ хорошо подойдёт если вы верстаете страницу с нуля и у вас в подвале одна или 2 строки. Если же вы правите готовый шаблон с уже имеющейся вёрсткой и подвал футер сайта состоит из нескольких колонок и сайт адаптивный, то данный способ прижатия футера будет не очень удобен так как вам будет тяжело угадать высоту подвала так чтобы он нормально выглядел на разных экранах.

Для нормального отображения такого варианта прижатия футера к низу страницы вам нужно будет при помощи медиазапросов или скриптов задавать разную высоту футера и разный нижний отступ для контента для разных экранов.

Способ 3. Упрощённый

Смысл у данного способа такой же, как и у предыдущего, но мы задаём для футера абсолютное позиционирование не относительно родительского блока, а относительно всего тела страницы.

Чтобы прижать наш футер к низу страницы пишем следующие  свойства CSS

body, html { position:relative; height:100%; } .footer { width:100%; position:absolute; bottom:0; }

body, html {

position:relative;

height:100%;

}

 

.footer {

width:100%;

position:absolute;

bottom:0;

}

Так же если контент будет залазить под футер, то для него нужно будет задать нижний  padding, например, так:

.content { padding-bottom: 200px;  /*нижний внутренний отступ,  который приблизительно равен высоте футера*/ }

.content {

padding-bottom: 200px;  /*нижний внутренний отступ,  который приблизительно равен высоте футера*/

}

Способ 4. Табличный

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

Для его реализации для наших блоков дописываем следующий CSS свойства

html, body { height: 100%; } #main { height: 100%; width:100%; /*нужно не всегда, дописываем при необходимости*/ display: table; } .content { height: 100%; display: table-row; }

html, body {

height: 100%;

}

 

#main {

height: 100%;

width:100%; /*нужно не всегда, дописываем при необходимости*/

display: table;

}

 

.content {

height: 100%;

display: table-row;

}

Смысл  способа заключается в том, что основной блок #main, после получения CSS свойства display: table; начинает вести себя как таблица, а блок  .content после получения свойства display: table-row; ведёт себя как строка таблицы и лучше подстраивается под высоту экрана.

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

Вот что у меня получилось в итоге экспериментов с каждым из этих способов:

Прижать футер к низу страницы

Это, пожалуй, все основные способы прижатия футера к низу страницы. Есть так же и другие, но они либо малоэффективны и поддерживаются не всеми браузерами, либо основываются на вышеперечисленных с незначительными доработками.

Как научиться продвигать сайты?

Если у вас есть свои способы как прижать футер к низу, то обязательно делитесь ими в комментариях.

Делитесь этой статьёй в соцсетях, подписывайте на обновления блога и канал YouTube, на котором вы найдёте видеоинструкции по решению различных задач в сфере веб-разработки.

Желаю вам успехов в решении данной проблемы и до встречи в следующих статьях!

impuls-web.ru

Как прижать футер к низу

Вы здесь: Главная — CSS — CSS Основы — Как прижать футер к низу

Как прижать футер к низу

Не так давно меня попросили показать, как прижать футер к низу. Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.

Допустим, есть такой HTML-код:

<body>
  <div>
    <p>Текст</p>
  </div>
  <div>
    <p>Подвал</p>
  </div>
</body>

Чтобы прижать футер к низу, надо применить к данному HTML-коду следующий CSS-код:

html {
  height: 100%;
}
body {
  height: auto !important; //Обязательно, если контента в main будет много
  height: 100%;
  min-height: 100%;
}
#main {
  padding-bottom: 50px;
}
#footer {
  bottom: 0;
  height: 50px;
  position: absolute;
}

Здесь всё прозрачно, но скажу только, что строчка «height: auto !important;» позволяет учитывать то, что если контента в main будет больше, чем высота страницы, то высота будет больше, чем 100%. Без неё подвал просто налезет на контент и всегда будет находиться в одном и том же месте.

К сожалению, решение не блещет красотой, но другие, на мой взгляд, ещё хуже. А вообще когда контента мало, то я просто внизу оставляю цвет фона сайта. Но заказчик иногда просит всё-таки прижать подвал к низу, и тогда я использую способ, описанный в данной статье.

  • Как прижать футер к низу Создано 10.09.2012 13:54:59
  • Как прижать футер к низу Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

Как привязать футер к низу страницы | Wiki

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

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

<html>
    <head></head>
    <body>
        <div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>
    </body>
<html>

После того как структура страницы готова, приступаем к настройке css.

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:
html,
body{
     height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
}
.main {
    padding-bottom: 80px;
}
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
}

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.

Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.

wiki.pwodev.com

Как прижать футер к низу страницы

Работая с несколькими десятками сайтов в месяц, начал замечать, что люди либо не хотят, либо просто не умеют сделать свой футер Футером) данная проблема наблюдается у страниц, которые предусмотрены для одного экрана, то есть страницы, которые полностью видны без прокрутки. Когда нижний блок не прижимается к низу экрана смотрится это не очень красиво. Проблему легко решить с помощью правильного применения CSS свойств и прижать футер к низу.

 

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

Как прижать футер к низу страницы?


HTML
Рассмотрим всё на простой структуре из 3-х блоков:

 


<div>
    <div>
        <!-- Содержимое шапки -->
    </div>
    <div>
        <!-- Содержимое центральной части -->
    </div>
    <div>
        <!-- Содержимое нижнего блока -->
    </div>
</div>

 

Тут мы имеем один общий блок, в котором находятся три видимых блока.

CSS
Здесь также всё довольно просто:

 


html,
body {
  height:100%;
}
 
#container {
   min-height:100%;
   position:relative;
}
 
/*Стили для блока с шапкой*/
#header {
   background:#222;
   padding:10px;
}
 
/*Стили для центральной части*/
#body {
   padding-bottom:70px;   /* Высота блока "footer" */
}
 
/*Стили для нижней части*/
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:70px;   /* Высота блока "footer" */
   background:#66ccff;
}

 

Отметим строки с комментариями. 
padding-bottom:70px — это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера) — height:70px. В этом и есть весь секрет. То есть отсупаем от центральной части ровно на высоту самого футера.

 

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

roothelp.ru

seodon.ru | Примеры HTML и CSS

Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

Как прижать футер к низу страницы? Этот вопросом задаются многие, кто сталкивался с версткой макетов для сайта. Дело в том, что если высота блоков в этих макетах не указана явно, то она зависит от количества их содержимого, соответственно, если этого содержимого достаточно мало, то весь макет может занимать высоту меньше чем окно браузера. Естественно выглядит все это не очень красиво. Сейчас я покажу вам несколько способов, которые позволят прижать футер к нижней части страницы и таким образом сделать макет более привлекательным и привычным.

В каждом из примеров будем отталкиваться от того, что макет сайта имеет такую обычную структуру (ваш макет может отличаться, но способы универсальные):

<body>
 <div>Шапка</div>
 <div>Меню</div>
 <div>Контент</div>
 <div>Футер</div>
</body>

Далее для достижения необходимого результата к макету будут добавляться дополнительные блоки, свойства CSS и т.д. Однако в том макете, у которого вы решили прижать футер к низу страницы, эти блоки или некоторые свойства уже вполне могут присутствовать, так что добавлять их повторно не нужно. Все свойства CSS, которые непосредственно участвуют в прибивке футера к низу, снабжены комментариями.

Прижать футер к низу с помощью позиционирования

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - прижимаем футер к низу, используя позиционирование</title>
  <style type="text/css">
   html, body {
    height: 100%; /* высота HTML и BODY */
    margin: 0; /* убираем поля по краям страницы */
    padding: 0;
   }
   body {
    font-size: 2em;
    color: #000;
    background: #fff;
   }
   #wrapper {
    min-height: 100%; /* минимальная высота обертки */
    height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
    height: 100%; /* для IE6, т.к. он понимает height, как min-height */
    position: relative; /* позиционируем относительно этого блока */
   }
   #header {
    background: #fc0;
   }
   #menu {
    width: 250px;
    background: #0fc;
    float: left;
    padding-bottom: 100px; /* нижний внутренний отступ у меню */
   }
   #content {
    background: #eee;
    margin-left: 250px;
    padding-bottom: 100px; /* нижний внутренний отступ у контента */
   }
   .clear {
    clear: both; /* класс для прерывания обтекания */
   }
   #footer {
    width: 100%; /* ширина футера */
    height: 100px; /* высота */
    position: absolute; /* абсолютное позиционирование */
    bottom: 0; /* прижимаем к нижнему краю обертки */
    color: #fff;
    background: #000;
   }
  </style>
 </head>
 <body>
  <div>
   <div>Шапка</div>
   <div>Меню</div>
   <div>Контент</div>
   <div></div>
   <div>Футер</div>
  </div>
 </body>
</html>

Результат примера

Описание примера

  1. Все блоки макета были заключены в дополнительный блок-обертку, которому задали минимальную высоту (свойство CSS min-height) равную 100%, чтобы он растянулся во всю высоту окна браузера, но если потребуется, то мог тянуться и дальше. Однако так как процентные значения считаются относительно предка, то чтобы все сработало, пришлось явно указать высоту (CSS height) для тегов <HTML> и <BODY>.
  2. Следующим шагом стало абсолютное позиционирование (CSS position) футера относительно оберточного блока к его нижней стороне (CSS bottom). Таким образом, футер у нас оказался прижат к нижней части страницы.
  3. Так как абсолютное позиционирование вырывает элемент из потока, то при добавлении информации в блоки с контентом и меню, часть ее будет уходить под прижатый футер. Чтобы этого не произошло, элементам и были установлены нижние внутренние отступы (CSS padding) равные высоте футера. Теперь именно они будут уходить под футер и толкать его вниз.
  4. Так как у нас в макете блок с меню является плавающим (CSS float), то футер все равно его не будет замечать, а, соответственно, меню не будет толкать его вниз. Для исправления этого был создан еще один блок (class=»clear»), который прерывает обтекание (свойство CSS clear). Кстати, если вы не планируете осуществлять поддержку IE6 и IE7, то можете вместо этого блока применить к последнему блоку перед футером (здесь это «content») псевдоэлемент :after и просто у него сделать прерывание обтекания.

В первом пункте было применено свойство CSS для указания минимальной высоты, которое не понимает Internet Explorer 6. Зато он понимает свойство height как раз как минимальную высоту. Также этот браузер в определенных случаях игнорирует правило !important. Эти его две особенности и были использованы в данном примере для создания хака, чтобы заставить его делать то, что надо, не затрагивая другие браузеры.

Прижать футер к низу с помощью дополнительных блоков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - прижимаем футер к низу, используя дополнительные блоки</title>
  <style type="text/css">
   html, body {
    height: 100%; /* высота HTML и BODY */
    margin: 0; /* обнуление полей по краям страницы */
    padding: 0;
   }
   body {
    font-size: 2em;
    color: #000;
    background: #fff;
   }
   #wrapper {
    min-height: 100%; /* минимальная высота 100% для обертки */
    height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
    height: 100%; /* для IE6, т.к. он понимает height, как min-height */
   }
   #header {
    background: #fc0;
   }
   #menu {
    width: 250px;
    background: #0fc;
    float: left;
   }
   #content {
    background: #eee;
    margin-left: 250px;
   }
   #footer_correct {
    height: 100px; /* высота блока-корректора */
    clear: both; /* прерывание обтекания */
   }
   #footer {
    height: 100px; /* высота футера */
    color: #fff;
    background: #000;
    margin-top: -100px; /* верхнее отрицательное поле */
   }
  </style>
 </head>
 <body>
  <div>
   <div>Шапка</div>
   <div>Меню</div>
   <div>Контент</div>
   <div></div>
  </div>
  <div>Футер</div>
 </body>
</html>

Результат примера

Описание примера

  1. Все блоки макета кроме футера были обернуты в дополнительный блок, которому была задана минимальная высота (CSS min-height) в 100%. Это было сделано для того, чтобы блок-обертка как минимум вытянулся во всю высоту окна браузера, но при необходимости (если содержимого будет много) мог тянуться и дальше. Теперь высота нашей обертки стала равна высоте окна браузера, а высота всей HTML-страницы = высота обертки + высота футера.
  2. В результате действий первого пункта наш футер хоть и прижался к низу страницы, но ушел за нижнюю границу окна браузера, что не хорошо. Чтобы поднять его в зону видимости, для него было задано верхнее отрицательное поле (CSS margin-top) размер которого равен высоте самого футера. Все, футер прижат и находится внизу страницы.
  3. Так как в предыдущем пункте у прижатого футера мы указали верхнее отрицательное поле, то при добавлении информации в блоки с контентом или меню, часть ее будет уходить под этот футер. Чтобы этого избежать был создан еще один блок с, высота которого равна (можно сделать даже чуть больше) высоте футера. Таким образом, именно этот корректирующий блок будет уходить под прижатый футер и толкать его вниз, предотвращая скрытие информации.
  4. Корректирующему блоку было добавлено прерывание обтекания (CSS clear), чтобы он не обтек меню, если оно будет превышать высоту контента. Соответственно у самого футера это прерывание обтекания было убрано за ненадобностью.

Как и в первом примере, для IE6 здесь был применен специальный хак, позволяющий задать ему минимальную высоту.

seodon.ru

Лучший способ прижать футер используя flexbox

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

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

Разберем наш способ

Чтобы предотвратить эту ошибку, мы будем создавать нашу страницу, используя flexbox — самый продвинутый инструмент, который CSS3 может предложить для построения адаптивных макетов.

Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.

<body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
</body>

Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

После этого нужно настроить, какое количество места займет каждый раздел. Мы добились этого благодаря свойству flex, которое объединяет три гибких спецификации в одну:

  • flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
  • flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
  • flex-basis — размер для элемента, установленный по умолчанию.

Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:

header{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}
.main-content{
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}
footer{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

Чтобы увидеть эту технику в действии, ознакомьтесь с нашей демонстрационной страницей в конце страницы. Используя большую розовую кнопку, вы можете изменить количество контента, чтобы понаблюдать за тем, как макет адаптируется.

Подводим итоги и делаем выводы

Таким образом, flexbox можно считать отличным союзником при построении макетов с нуля. Все основные браузеры поддерживают его с несколькими незначительными исключениями, поэтому его довольно безопасно использовать во всех проектах IE9+. На сайте вы можете найти ещё один способ, но уже используя только CSS – «Как прижать футер к низу страницы».

Надеемся, наш метод создания закрепленных футеров был вам полезен, вы узнали что-то новое и вам понравилась эта статья. Оставьте нам комментарий, если знаете отличный способ использования flexbox!

falbar.ru

Как прижать Footer к низу в Grid? — Хабр Q&A

Делая дизайн на Grid столкнулся с вопросом, а как же прикрепить Footer внизу страницы, если мало контента. Гугл, видимо, знает столько же, сколько и я((
Даю ссылку на JSFiddle
Для самых сильных:
<body>
<header role="banner">
HEADER
</header>
<aside role="complementary">
ASIDE
</aside>
<main role="main">
MAIN
</main>
<footer role="contentinfo">
FOOTER
</footer>
</body>
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
   
   body {
        display: grid;
        grid-template-columns: [line1] 300px [line2] auto [line3];
        grid-template-rows: [row1] 60px [row2] 1fr [row3] 30px [row4];
        grid-template-areas:
                "header header"
                "aside main"
                ". footer";


    }
    header {
      position: fixed;
      left: 0;
      top: 0;
      height: 60px;
      width: 100%;
      background: red;
        grid-area: header;
        -ms-grid-column: line1 / line3;
        grid-column: line1 / line3;
        -ms-grid-row: row1 / row2;
        grid-row: row1 / row2;
    }
    aside {
      position: fixed;
      left: 0;
      top: 60px;
      height: 100%;
      width: 300px;
      background: green;
        grid-area: aside;
        -ms-grid-column: line1 / line2;
        grid-column: line1 / line2;
        -ms-grid-row: row2 / row3;
        grid-row: row2 / row3;
    }
    main {
      background: blue;
        grid-area: main;
        -ms-grid-column: line2 / line3;
        grid-column: line2 / line3;
        -ms-grid-row: row2 / row3;
        grid-row: row2 / row3;
        width: 100%;
    }
    footer {
      background: black;
        grid-area: footer;
        -ms-grid-column: line2 / line3;
        grid-column: line2 / line3;
        -ms-grid-row: row3 / row4;
        grid-row: row3 / row4;
    }

p.s. Sorry за префиксный мусор в коде

toster.ru

No related posts.