Menu
I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser.
Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen.
Rather than making al sorts of media queries and building some work aorund, I'm would prefer a clean CSS solution in which the sticky footer auto adapts when the width of the screen varies.
Does anyone of you have the ultimate answer?
843
Welcome to the magical world of flexbox! Try this out... http://jsfiddle.net/n5BaR/
<body>
<style>
body {
padding: 0; margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
padding: 1em;
}
header, footer {
background-color: #abc;
padding: 1em;
}
</style>
<header>Hello World</header>
<main>Content</main>
<footer>
Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque.
</footer>
</body>
The paddings and margins are just to be a little pretty, but the magic happens with display: flex; min-height: 100vh; flex-direction: column; and flex: 1;.
For more information and other examples, see http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
From Mozilla...
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. ... Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it.
165
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
