Menu
Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.
I've tried to play with the ::after pseudo element:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)
I hope anyone knows the secret, how to create a dynamic footer.
600
What you want is sticky footer with fluid height.
In older browsers you'll need some JavaScript.
In modern browser you can use css table display types:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
I took this example from:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.
Try this version instead:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
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
