Sticky Footer Problems

mikhial66

08-06-2011, 10:55 PM

I'm trying to make a site layout with a sticky footer and a header that go the width of the page. The content div should be 960px wide, and the height should go from the bottom of the header to the top of the footer. My problem is that I can't figure out how to get the content div to go just to the footer. The page (and content div) want to extend the height of the header past where the page should end.

Thanks

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>FBK</title>
</head>
<body>
<div id ='wrap'>
<div id='header'>
</div>
<div id='content'>
</div>
<div id='footer'>
</div>
</div>
</body>
</html>
html{
height: 100%;
min-height: 100%;
}

body{
min-height: 100%;
width: 100%;
height:100%;
}

#wrap{
height:auto;
height:100%;
min-height:100%;
position:relative;
margin:auto;
}

#header{
background: blue;
height: 152px;
}

#content{
background: #555;
min-height: 100%;
margin: 0 auto;
width: 960px;

}

#footer{
margin-bottom: 41px;
height: 59px;
background: red;
position:absolute;
width:100%;
bottom:0;
}

How it looks:
http://img21.imageshack.us/img21/8005/layout1qo.png

How it should look:
http://img15.imageshack.us/img15/6369/layout2sp.png

Sammy12

08-07-2011, 06:48 AM

height: auto !important;

the auto needs an !important, this is an ie hack

here's what a sticky footer should look like:

<body>
<div class="page-wrap">
<div id="header"></div>
<div class="content"></div>
<div class="footer-ctr"></div>
</div>
<div class="footer-wrap">

</div>
</body>

html, body {
height: 100%;
}

.page-wrap {
min-height: 100%;
margin: 0 auto -250px;
}

.footer-wrap, .footer-ctr {
height: 250px;
clear: both;
}

I left out the height: auto !important; and height: 100%; because I don't code for ie6

let me caution you, since I've been using sticky footers for a very long time.

do you really need one? will there be a lot of pages that don't have enough content to fill the page
for very large screens, the footer will be disconnected from the content (for example, your content will fill half the screen and a tiny little footer will be at the bottom)

mikhial66

08-07-2011, 07:32 AM

The code above has the footer working as it should. The problem is that I want to content div to take up all of the vertical space between the header and footer.

Sammy12

08-07-2011, 09:18 AM

haha yeah the code you posted isn't a sticky footer

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

if you literally plug that code into a new doc it will make the footer touch the exact bottom without a y-scrollbar

mikhial66

08-07-2011, 06:49 PM

That doesn't help me at all. I DO have a sticky footer. If you literally plug my code into a new doc, it will stay at the bottom. Like I said in the OP and my reply, I need the content div to behave differently, not the footer. I could fix the y-scroll bar in 5 seconds, but that wouldn't fix my content div

Sammy12

08-07-2011, 11:27 PM

nah nah man this isn't a sticky footer. you just absoluted the footer to the bottom. that doesn't work. i think you have your terms wrong a "sticky footer" was "founded" by ryan fait. eh kind of like how eric mayer "founded" resetting tags with vertical-align: baseline; & bc:trasnsparent, not really sure who really thought of the idea. anyways, the method your using is NOT a sticky footer!!!!!!

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
This is the only way

#footer{
margin-bottom: 41px;
height: 59px;
background: red;
position:absolute;
width:100%;
bottom:0;
}