SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer & can't change HTML structure

    Hi

    I'm creating a Moodle site but am having a bit of trouble with the theme I'm using (I did ask over on the Moodle forums but had no response so I'm trying here).

    The footer of my theme doesn't stick to the bottom of the browser window when there isn't enough content to fill it.

    If I were building a site from scratch I could do it fine, but I can't edit the HTML div structure so am trying to work with what I have.

    This is the HTML:

    HTML Code:
    <div id="page">
    
    <div id="headerwrap"></div>
    
    <div id="contentwrapper">
    
    <div id="page-content"></div>
    
    </div>
    
    <div id="footerwrapper"></div>
    
    </div>
    Any suggestions would be welcome.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    With that structure you'd need to use the absolute footer technique which is a little unreliable in old IE in dynamic situations but these days is less of an issue.

    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">
    p{margin:0 0 1em}
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #page:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    	margin:0;
    	padding:0;
    }
    #page {
    	width:760px;/* or whatever it needs to be */
    	background:#ffffcc;
    	margin:auto;
    	min-height:100%;
    	text-align:left;
    	clear:both;
    	position:relative;
    }
    * html #page { height:100% }
    #contentwrapper { padding-bottom:40px;/* protect absolute footer	*/ }
    #footerwrapper {/* footer now sits at bottom of window*/
    	position:absolute;
    	bottom:0;
    	left:0;
    	background:red;
    	width:760px;/* whatever the parent is */
    	margin:auto;
    	height:40px;/* must have a fixed height and matches the height of the padding on bottom of contentwrapper */
    	clear:both;
    }
    </style>
    </head>
    
    <body>
    <div id="page">
    		<div id="headerwrap"></div>
    		<div id="contentwrapper">
    				<div id="page-content">
    				<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 id="footerwrapper"></div>
    </div>
    </body>
    </html>
    A sticky footer only works with a fixed height footer (although you can use ems if necessary.)

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul I will give it a go.

    By "dynamic situations" do you mean responsive sites, or just resizing of browser window? Or something else?

    My site is just a centered 960px grid. It's quite likely there will be some IE6, 7 and 8 users so I will give it a good test in those browsers.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qwaerstd View Post
    Thanks Paul I will give it a go.

    By "dynamic situations" do you mean responsive sites, or just resizing of browser window? Or something else?
    IE8 should be ok. It's just that ie7 and under frequently misplace absolute elements when placed at the bottom of 100% wrapper when inner content is inserted and removed via javascript (such as in a hide and show). There is JS fix though if this happens and you have to cause the page to reflow which can be done by testing a classname on the body or other element after your routine has finished (el.className = el.className;//reflow).

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think Moodle uses a huge amount of javascript if any at all so with any luck I'll be ok.

    I'll let you know, thanks very much.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, that worked great.


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
  •