Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just gets stretched.
However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal.
What's the proper way to do this with CSS? Do I need Javascript/jQuery to make this happen?
I only care about IE9+ and modern versions of other browsers. The height of the footer can change from page to page too, so I'd like to not rely on the height.
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.
Set margin on the footer Because you set the Body — the footer's parent element — to Flex, you can set the top margin on the footer element to Auto. This makes the footer push away from the content above, causing the footer to stick to the bottom of the page.
Check out this site. He has a good tutorial on how to do this with css.
I copied his css just in case Matthew's site is taken down.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
EDIT
Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
Give this a try.
It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. It is a little hacky, and requires you to know the height of your footer (which may not work for your use case)
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
The important things here seem to be:
html
and body
)min-height
height: auto !important
and height:100%
Hope that helps!
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