CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
A simple method is to make the body 100%
of your page, with a min-height
of 100%
too. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
css footer position stick to bottom of browser?
This is always a bit difficult, you could increase the min-height
of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height
if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
How do you get the footer to stay at the bottom of a Web page?
To get a sticky footer:
Have a
<div>
withclass="wrapper"
for your content.Right before the closing
</div>
of thewrapper
place the<div class="push"></div>
.Right after the closing
</div>
of thewrapper
place the<div class="footer"></div>
.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
How to stick a footer to bottom in css?
Try setting the styles of your footer to position:absolute;
and bottom:0;
.
Related Topics
How to Use CSS Sibling Select to Select a Tag with a Link That Follows a Tag with an Image
Detect If Computer Can Support 3D Transforms Properly
Using Relative Instead of Fixed Size in CSS
Highlight Div1 and Div2 on Div2 Mousover, Highlight Nothing on Div1 Mouseover
Childrens Selectors from Sibling Parent Divs Using CSS for Hover Effect
Problem Applying CSS in Django with Static-Files App
CSS Style Not Recognizing Numbers
My Dropkick Plugin's Dropdown Looking Strange
Skew The Shadow, Not The Content
How to Target All Divs of The Same Class Except for Hovered Over Div
How to Float Two Divs Side-By-Side Without Specifying a Width
W3C CSS Grammar, Syntax Oddities
Remove Spacing Between Table Cells and Rows
Differences Between CSS3: Hover and: Focus
Rel=Preload for Stylesheet Isn't Applying The Styles Once Downloaded