1

My container for the entire website is a white box on a black background centered in the page. To do this so that content can resize the box I have to set: 

.container {
  position: absolute;
  background-color: white;
  min-height: 90%;
  top: 5%;
  width: 95%;
  left: 2.5%;
}

Trying to get a footer in here looks like this:

footer {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  text-align: center;
  height: 2.4em;
  border-top: 1px solid black;
}

to get the footer to the bottom I would assume I would have to position the container for the actual content 

%header
%section.content /<----
%footer

to have a min height of 100% but that didn't work.

Here is a fiddle: http://jsfiddle.net/a6QTv/1/

MikaAK
  • 2,334
  • 6
  • 26
  • 53

2 Answers2

1

Use the Sticky Footer technique from CSS-Tricks:

<div class="page-wrap">
    Content!  
</div>

<footer class="site-footer">
    I'm the Sticky Footer.
</footer>

<style type="text/css">
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}
</style>
pxwise
  • 1,350
  • 15
  • 16
  • It works for me by placing a div with class page-wrap above the footer, adding the class site-footer to the footer and pasting all css at the bottom of your css file as a proof of concept as seen here: http://jsfiddle.net/gk6QM/ – pxwise Mar 11 '14 at 06:44
  • http://jsfiddle.net/gk6QM/1/ Broken when switched to em and not using all that space that its using. I dont need that large of a footer I want to move it down to the bottom and when I switch to em it breaks – MikaAK Mar 11 '14 at 06:48
  • Try removing height from .container and .body-section. Those styles might be fighting the default structure of css stickyfooter. Set any footer height in .site-footer, page-wrap:after {height: 20px} and match the negative of that value in .page-wrap{margin-bottom: 20px} – pxwise Mar 11 '14 at 07:00
  • http://jsfiddle.net/gk6QM/2/ still not working. Please remember the .container is absolute and needs to be centered on screen thus the min body height. removing that turns it into what happens in this fiddle – MikaAK Mar 11 '14 at 07:06
  • position:absolute is not neccessary. Stickyfooter does work using proposed structure and this answer is expanding in scope. For centering see --> [use margin-left:auto; and margin-right:auto](http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) – pxwise Mar 11 '14 at 07:11
  • it is neccessary to keep the .container centered vertically and horizontally in the page no matter the page width/height. And can you post a fiddle of it working based off my original then? since I cannot get it to work and I would like to see how – MikaAK Mar 11 '14 at 07:13
0

try this css -

.container {
   margin: 0 auto;
}

footer {
  margin: 0 auto;
  position: absolute;
  bottom:0;
  height: 2.4em;
  border-top: 1px solid black;
}
Rohit Suthar
  • 3,528
  • 1
  • 42
  • 48
  • Setting the footer to absolute would make text get hidden at the bottom. I guess I could set padding up a bit – MikaAK Mar 11 '14 at 06:09