SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    New CSS3 Sticky Footer

    What do you think? This is the easiest I can make it. http://www.visibilityinherit.com/cod...ooter-demo.php.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    God Damnit! I just assumed that :before took care of the AP footer. I should of tested first before I blew my own horn. Eric slowly slinks away hunched over and embarrassed... apparently more testing is in order.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Eric dusts himself off and gets back on the horse. OK now it's perfect! The AP footer is accounted for. http://www.visibilityinherit.com/cod...oter-demo1.php

    Edit: Updated link

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    And the more typical footer outside the wrapper http://www.visibilityinherit.com/cod...oter-demo2.php

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    Basically you are swapping padding or borders on the inner element in favour of using :after to soak up the space. While that is a good technique it does tie up the :after or :before classes as I use them all the time for adding things and would not like to use them up if the alternative is simply adding padding to an existing item - especially as the clearing techniques use :after and most have those built in to their templates and could cause conflicts to the unwary.

    However it is a useful technique and I noticed a good round up of techniques in your site but they are all missing a new trick

    The downfall of all the sticky footer routines is that you need to have a fixed height for your footer otherwise you can't accommodate it. However, if only IE8+ support is required then you can do this for an auto height sticky footer like so:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0
    }
    html, body { height:100% }
    #outer {
    	width:760px;
    	background:#ffffcc;
    	margin:auto;
    	height:100%;
    	display:table;
    	table-layout:fixed;
    	vertical-align:top;
    }
    .inner { display:table-row; }
    #footer {
    	background:red;
    	width:760px;
    	vertical-align:bottom;
    	height:1px;/* use a minimum height to keep footer wrapped to content */
    }
    #main {
    	vertical-align:top;
    	background:blue;
    	width:100%;
    }
    #main, #footer { display:table-cell }
    </style>
    </head>
    <body>
    <div id="outer" >
    		<div class="inner">
    				<div id="main">
    						<p>test start</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test</p>
    						<p>test last</p>
    				</div>
    		</div>
    		<div class="inner">
    				<div id="footer">
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    						<p>content</p>
    				</div>
    		</div>
    </div>
    </body>
    </html>

    If you are looking for an even simpler version of the standard sticky footer then you can use box-sizing (ie8+) with minimal code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    h1, p { margin:0; }
    .outer {
    	width:960px;
    	margin:auto;
    	height:100%;
    	display:table;
    	padding-bottom:100px;
    	background:#ffc;
    	position:relative;
    	-moz-box-sizing:border-box;
    	-webkit-box-sizing:border-box;
    	box-sizing:border-box;
    }
    .footer {
    	position:relative;
    	width:960px;
    	margin:-100px auto 0;
    	height:100px;
    	color:#fff;
    	clear:both;
    	background:#000;
    }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<h1>Sticky Footer</h1>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>
    You just make the space for the footer with the padding bottom which is contained within the 100% in the border-box model. That saves all the complicated after rules.

    I am still wary of using the absolute positioned sticky footer as I still see problems in IE8 in dynamic situations where content has been inserted and IE8 suddenly forgets where the bottom was due to the sticky footer routine. Therefore I would still go for the static/relative element where possible.

    Regarding browser limits then we ran into the 32767px limit in a recent thread regarding Firefox tiling images so its a good idea never to exceed that limit.

    Good work though and always interesting as usual

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul The height limit maybe a problem with some other things but, at least for now, with this technique, there doesn't seem to be one unless I somehow missed it. Ya that can be true about using up the before and after. So if thats a prob for anyone use display table for ie8 on the container and some padding or another technique on the innards. Thats a nice auto height. Do you have that auto hieght footer up live somewhere so I can link to it?

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    O and also regarding the ap footer. I made one using the same stuff with the footer outside too. Demo 2.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    O and regarding the dynamic stuff and ie8 not adjusting the page to follow. I would like to test this. I think that may be a non-issue as long as you have one of the fixes in place for for ie8. Logic says that if with the fix in place ie follows the footer when dragging the window it "should" also follow it when dynamic stuff pops in. Just a thought.

    And as a side note, as I wrote in this morning in the tut you can add clear both to the wrap:after as a clearing mechanism

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks Paul Thats a nice auto height. Do you have that auto hieght footer up live somewhere so I can link to it?
    Hi Eric,

    There's a version here but its a few years old although and probably needs some more testing but seems to work on all the modern browsers and IE8+.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool I'll link to it as an alternate example in your example #10. Do you have any dynamic js to quickly pop in there and test my theory?

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That css3 footer you just posted (not the auto height) is nice. Auto height is nice to just not the one I'm referring to. I assume you had clear both on the footer just for float clearing yes? But why the position relative on the container and the footer? Testing it all works with out either three rules.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Do you have any dynamic js to quickly pop in there and test my theory?
    The problem is that it is one of those bugs that only crops up in complicated situations and isn't always reproducible and indeed only seems to happen when online and there is a server lag thrown into the mix. I've seen it a few times now but checking my records it was mainly in IE7 and 6 so IE8 should be ok I think.

    There were fixes for it and one was overflow:hidden instead of using a clearer or :after rule and the other was via the JS that was doing the hide and show and if you address a main container after you've hidden or revealed content it makes the page reflow and fixes the mispositioned element.

    e.g.
    Code:
    el.className = el.className;//reflow

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    That css3 footer you just posted (not the auto height) is nice. Auto height is nice to just not the one I'm referring to. I assume you had clear both on the footer just for float clearing yes? But why the position relative on the container and the footer? Testing it all works with out either three rules.
    No most of those extra rules were just left in from testing and not needed. I did test it with the absolute footer originally but it didn't need it. The position:relative on the footer is just to make sure it doesn't get dragged underneath the element above.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK there is the final tut. I think that includes everything.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Looks good Eric

    Typo here you may want to correct:
    shone
    I think you meant "shown"

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahh yes. Thanks Paul. Wow only one error. Spelling has never been my strong suit.

  17. #17
    SitePoint Member
    Join Date
    May 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really a 'CSS3 sticky footer' if all the offered files use php.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by conspiritech View Post
    Not really a 'CSS3 sticky footer' if all the offered files use php.
    What has that got to do with anything? Please Clarify.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •