CODEWITHSUNDEEP
htmlcsscontainersfooter
AAA
AAA

Reputation: 3168

How do I create a footer that will stick to the bottom of the screen regardless of the container height?

I can't seem to figure this out. I have a footer that I want to display at the bottom of the page regardless of the height of the container and regardless of the screen size. It seems that on some larger screens the background scrolls all the way to the bottom of the page and the footer is in the middle and on regular 13 inch 17 inch screens it's ok.

CSS:

#container {
background-color: #ffffff;
min-height: 320px;
margin: 100px auto;
width: 960px;
max-width: 100%;
}
#footer {
background-color: #FFFFFF;
width: 100%;
height: 50px;
position:absolute;
margin-top: 140px;
}

Upvotes: 0

Views: 114

Answers (1)

Jimmy Baker
Jimmy Baker

Reputation: 3255

This should get you started:

http://twitter.github.io/bootstrap/examples/sticky-footer.html

Looks like they're setting 

min-height: 100%
height: auto !important

on the main content section, then adding the footer element after it.

Upvotes: 1

Related Questions