Задать вопрос

Как прижать Footer к низу в Grid?

Делая дизайн на Grid столкнулся с вопросом, а как же прикрепить Footer внизу страницы, если мало контента. Гугл, видимо, знает столько же, сколько и я((
Даю ссылку на JSFiddle
Для самых сильных:
<body id="Body">
<header role="banner">
HEADER
</header>
<aside id="Aside" role="complementary">
ASIDE
</aside>
<main id="Main" role="main">
MAIN
</main>
<footer id="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 за префиксный мусор в коде
  • Вопрос задан
  • 10254 просмотра
Подписаться 1 Средний Комментировать
Решения вопроса 1
vadimkot
@vadimkot Куратор тега CSS
Примерно также как и на флексбоксе делается - для начала сделать высоту body в 100%
https://codepen.io/anon/pen/QQwYav
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
UnluckySerivelha
@UnluckySerivelha
А так не вариант сделать? Проще же.
https://codepen.io/anon/pen/qxEJqQ
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы