Делая дизайн на 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 за префиксный мусор в коде
Простой
