Menu
I am trying to make a css layout that looks like this
The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.
If anyone could help me out on this it would be greatly appreciated!
357
It's 2020, how about some Grid?
body {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
grid-column: 1 / 4;
}
.left-sidebar {
grid-column: 1 / 2;
}
main {
grid-column: 2 / 3;
overflow: auto;
}
.right-sidebar {
grid-column: 3 / 4;
}
footer {
text-align: center;
grid-column: 1 / 4;
}
html, body {
margin: 0;
padding: 0;
background-color: #aed9e0;
}
body > * {
outline: 1px dashed #247ba0;
}
.left-sidebar, .right-sidebar, main, header, footer {
padding: 2rem;
}<body>
<header><strong>Header</strong></header>
<div class="left-sidebar">Left Sidebar</div>
<main contenteditable>
Main Content
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</main>
<div class="right-sidebar">Right Sidebar</div>
<footer>Footer Content</footer>
</body>In 2017, you can achieve this layout pretty gracefully and easily with flexbox:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
flex: 0 0 100px;
background-color: #C14F4F;
}
main {
flex: 1;
display: flex;
background-color: #699EBD;
}
footer {
flex: 0 0 40px;
background-color: #C14F4F;
}
.left, .right {
flex: 0 2 150px;
background-color: #C28282;
}
.middle {
flex:1 1 300px;
}<header></header>
<main>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</main>
<footer></footer>See this technique for top/bottom, and just put sidebars in it. Even works in IE6 :p
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
