January 23rd, 2015, 02:12 PM
-
Sticky footer with 100% content height
Hi--
Trying to build a responsive site with a header, two-column content area, and a sticky footer.
I can do all of this, but the hangup I'm running into is making the two columns in the content 100% height if it's less than the screen size.
so basically this is what I've got:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {margin: 0; padding: 0; min-height: 100%; height: 100%;}
#page {max-width: 1000px; margin: auto; background-color: #ccc; overflow: auto;}
header {width: 100%; height: 150px; background-color: #f00;}
footer {width: 100%; height: 150px; background-color: #0f0;}
#left {width: 200px; float: left;}
#content {max-width: 750px; float: left; border-left: 1px dotted #000;}
</style>
</head>
<body>
<div id="page">
<header>header here</header>
<div id="left">subnav</div>
<div id="content">
<p>blah</p>
</div>
</div>
<footer>footer here</footer>
</body>
</html>
This works great if the content extends past the bottom of the screen, but if not, the footer floats right below the content.
If I add 100% height to the #page element, it pushes the footer below the screen. I can, of course, play with negative margins and such, but nothing I've tried works. Also, I need the #content element 100% high so the dotted line extends the whole way and the footer needs to be all the way across the screen, not just the content.
I'm dying here so any help is appreciated.
“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann
"...all men are created equal." -- US Declaration of Independence
January 23rd, 2015, 03:16 PM
-
Hi there Frank Grimes,
try it like this...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
html,body {
height:100%;
margin:0;
padding:0;
}
#container {
position:relative;
min-height:100%;
}
#page {
max-width:1000px;
border:1px solid #000;
margin:auto;
background-color:#ccc;
overflow:hidden;
}
header {
height:140px;
padding:5px;
background-color:#f00;
}
#subnav {
float:left;
width:190px;
padding:5px;
border-right:1px dotted #000;/* required for #subnav being higher than the #content */
}
#content {
padding:5px;
border-left:1px dotted #000;
margin-left:200px;
}
#content p {
margin:0;
padding-bottom:10px;
}
#footer-spacer{
height:150px;
}
footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
padding:5px 0;
background-color:#0f0;
}
</style>
</head>
<body>
<div id="container">
<div id="page">
<header>header here</header><!-- end #header -->
<div id="subnav">subnav</div><!-- end #page -->
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div><!-- end #content -->
</div><!-- end #page -->
<div id="footer-spacer"></div>
<footer>footer here</footer><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
coothead
~ the original bald headed old fart ~
January 23rd, 2015, 03:46 PM
-
Thanks, coothead, but it's not working. I need the content to fill the screen vertically. Adding height: 100% to either #page or #content doesn't work here.
More and more I'm think Javascript is the solution here.
“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann
"...all men are created equal." -- US Declaration of Independence
January 23rd, 2015, 04:50 PM
-
Hi there Frank Grimes,
sorry, but I misread your requirements a little bit.
Check out the attachment, it may be nearer to your needs.

cooteahead
Comments on this post
~ the original bald headed old fart ~
January 23rd, 2015, 04:56 PM
-
Ah, very close. Thank you! I just need the footer across the width of the screen, not just the content.
Seriously, why is this so hard?
EDIT--
Thinking a little more about this, I bet your code will work fine for me. I could probably get away with using an image on the <body> and position it at the bottom. The content in my footer needs to be centered with the content, but the green footer bar needs to be full screen width. I need to try this when I have more time.
Again, thank you!
Last edited by Frank Grimes; January 23rd, 2015 at 05:00 PM.
“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann
"...all men are created equal." -- US Declaration of Independence
January 27th, 2015, 12:32 PM
-
I wrestled with this for a long time and coothead helped me a lot, but eventually wasn't able to get this working. Then I found a site with exactly what I needed: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
Amazing. I was able to adapt this to my needs.
Really looking forward to better support for flexbox!
“Be ashamed to die until you have won some victory for humanity.” -- Horace Mann
"...all men are created equal." -- US Declaration of Independence