How to push Footer to the bottom in Grid?

V

Vlad Sklyar2018-01-30 23:16:06

css

Vlad Sklyar, 2018-01-30 23:16:06

When making a design on Grid, I ran into the question of how to attach a Footer to the bottom of the page if there is little content. Google, apparently, knows as much as I do ((
I give a link to JSFiddle
For the strongest:

<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;
    }

ps Sorry for the prefix garbage in the code

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vadim Kot, 2018-01-31
@sklyarv

Approximately the same as it is done on flexbox - first make the body height 100%
https://codepen.io/anon/pen/QQwYav

D

Dymok, 2018-01-30
@UnluckySerivelha

Isn't it an option to do so? It's easier.
https://codepen.io/anon/pen/qxEJqQ