Dev Shed Forums

**Frank Grimes**

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.

**coothead**

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

**Frank Grimes**

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.

**coothead**

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

**Frank Grimes** · 04:00 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!

**Frank Grimes**

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!

Dev Shed Forums

Thread: Sticky footer with 100% content height

Sticky footer with 100% content height

Comments on this post