homepage Welcome to WebmasterWorld Guest from 54.205.193.39
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Sticky Footer
Matti79




msg:4316731
 6:41 am on May 24, 2011 (gmt 0)

Hi,

I am trying to be a good boy and stay away from tables. But,
unfortunately tables do make life a bit easier if you want do the code below.
Is there any way to vertically strech a div with in pageholder div, so it will acts as a filler? Above and underneath this DIV there is a header and a footer.

In the example you will see that the RED area is not stretched all the way to touch the footer, so the BLUE of the pageholder (#frame) is still visible.

I tried solution with height 100% if a differtent setup, but I always ended up with a scrollbar because browsers will calculate the #frame area as 100% + the header and footer, so the actual window height will be 100+% (which is kinda stupid in my opinion).

Also tried absolute positioning of header and footer, but when the #frame area got more content then would fit in the window and expand, it would go underneath the footer. Apparently bottom 0 is not being recalculated by a browser.

So in a nuttshell; I want to mimic the table function where you can give a TD 100% height and it will push everything up and down and stretch to the max available height.
I do not want to go and use Javascript to correct the issue on body onload...seems to be wrong.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
html,body
{
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}

#frame
{
width:909px;
margin:0px auto -219px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
background-color: blue;

}
#header
{
width:909px;
height:200px;
background-color:yellow;
}
#outercontent
{
background-color:red;
padding:30px;
}

#innercontent
{

}
#footer,#push {
height: 219px; /* .push must be the same height as .footer */

}
#footer {
position:relative;
background-color:pink;
width:909px;
margin:0px auto;
z-index:999;
}
</style>
</head>
<body>
<div id="frame">
<div id="header"></div>
<div id="outercontent">
<div id="innercontent">[!CONTENT!]
this should be red, and stretched to the bottom and touch the footer <br />
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">This footer is sticky</div>
</body>
</html>


Thanks for any suggestions

 

alt131




msg:4317472
 3:58 pm on May 25, 2011 (gmt 0)

Hi Matti, and welcome to WebmasterWorld :)

This looks like Ryan Fait's sticky footer - have you checked the trouble-shooting resources plus those at cssstickyfooter?

Also #4 in the forum library is a tutorial post on sticky footers that might provide some clues.

Matti79




msg:4318320
 11:38 pm on May 26, 2011 (gmt 0)

Hi Alt131,

Well, it is not really the footer that I am interested in, but the DIV between the footer and the header (all 3 are part of a #frame, but the #outercontent div does not stretch to the bottom.

But I will check out Ryan solution and see if it matches.

Matti79




msg:4318322
 11:41 pm on May 26, 2011 (gmt 0)

Yep, it seems that I already used Ryan Fait's example with the #push div.
So if anyone has any ideas how to stretch the #outercontent to touch base with the #footer, I would be delighted and never use tables again :)

alt131




msg:4318493
 10:53 am on May 27, 2011 (gmt 0)

Hi Matti79, tables are the appropriate element for marking up tabular data, so promising not to use them isn't your best bargaining chip ;)

I've dropped your desired framework into Ryan's, cssstickyfooter and the library tutorial, and they all work. A forum search on "sticky footer" will pull up just over 900 posts about how to get this technique to work - so I'm a bit lost as to what other suggestions you would like.

Paul_o_b




msg:4320427
 11:23 am on Jun 1, 2011 (gmt 0)

Everything is basically an illusion so why don't you use the background colour on #frame as that is the element that stretches to the footer.


#frame {
width:909px;
margin:0px auto -219px;
position:relative;
min-height: 100%;
background-color:red;
}
* html #frame{height:100%}



You would never have seen the blue that you had originally applied to #frame had you succeeded in stretching the red down so there is no difference visually.

(BTW I would avoid Ryan Fait's sticky footer version as it has a number of issues in ie7/8 and opera.)

alt131




msg:4320726
 8:24 pm on Jun 1, 2011 (gmt 0)

(BTW I would avoid Ryan Fait's sticky footer version as it has a number of issues in ie7/8 and opera.)
Interesting point Paul (and good to see you back). I don't do sticky footers, but usually when that one turns up here it is a problem. Can you identify the issues - or is it best to leave in the "avoid" catagory?
Paul_o_b




msg:4320757
 9:35 pm on Jun 1, 2011 (gmt 0)

Thanks, I just saw the thread while doing a search and couldn't resist answering :)

Yes the issues with Ryan's version are not immediately apparent (and not life threatening) but in IE7 and IE8 if you drag the bottom of the viewport downwards the footer hangs in mid air and doesn't hug the bottom of the viewport. If you refresh it clicks back into place but I find that a little bit annoying :)

Opera has similar problems and seems to work until you resize the viewport and the the footer again just hangs there.

Ie7's problem stems from the height:auto and height!important hacks and although it should have no adverse effects it breaks the 100% height for some odd reason. That's why when I posted the code above I moved the height:100% into its own rule for IE6 only. Indeed if you count characters the * html version is actually less code than defining height three times in the same rule so it's a better solution anyway.

IE8 has problems with 100% height in the sticky footer set up and needs a helping hand and either giving it a height:100% and using display:table will work but of course changes the elements behaviour. A better method is just to add the clearfix clearing mechanism to the wrapper and the pseudo content seems to trigger the correct behaviour and all works as expected.

Opera has never liked the 100% wrapper and the only solution previously (opera 11 seems better) was to add a 1px wide 100% high float at the edge of the window (much like the old safari min-height hack)and that triggers opera into working. These days that float can be added with pseudo content on the body element and even removed from the page with negative top margins to avoid clearing issues or taking up any space.

There are some other solutions around involving overflow on html but I find those too buggy to use safely.

The second link you mentioned above has some of the methods in place that I just mentioned although it does stray from the current path in a couple of places but is mostly sound.

I suppose these problems are what we get for trying to do things that aren't natively available :)

alt131




msg:4321940
 2:26 pm on Jun 4, 2011 (gmt 0)

Hi Paul, WOW!
Much more than I was expecting when I asked, and a thoroughly enjoyable read - so thank you very much for taking the time. I've also bookmarked it so I can send future questions back here as well.

I just saw the thread while doing a search and couldn't resist answering
Well, I'm a bit biased, but I don't think anyone should resist at all ;) Please set your preferences to be automatically notified of new posts to the css forum - and indulge the temptation to participate as much as possible!
System
redhat



msg:4329927
 3:39 am on Jun 23, 2011 (gmt 0)

The following 2 messages were cut out to new thread by alt131. New thread at: css/4329925.htm [webmasterworld.com]
1:54 am on Jun 24, 2011 (utc +12)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved