SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full height page with footer at bottom

    Hi all

    I have a simple page here with a header, content and a footer that sticks to the bottom of the page

    http://www.ttmt.org.uk/footer/

    The footer sticks to the bottom as I wanted but I also wanted the background of the content to stretch the full height of the page to touch the footer like in this image

    http://www.ttmt.org.uk/footer/example.html

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just either give the container a background color of white or a repeating y background image.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The container does have a background color set to white

    Code:
    #contentwrap #content{
    	    background:white;
    	    height:100%;
    	    height:auto;
    	  }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Just put the white background on the container and give it the same width as the rest of the items.

    You need a number of fixes to make that sticky footer more robust.

    Here's the code:

    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">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100&#37;;/* needed to base 100% height on something known*/
        text-align:center;
    }
    body {
        background:#808080;
    }
    #outer {
        width:900px;
        background:#fff;
        margin:auto;
        min-height:100%;
        margin-top:-100px;/*footer height - this drags the outer 100px up through the top of the monitor */
        text-align:left;
    }
    * html #outer {
        height:100%
    }
    #header {
        border-top:100px solid #add8e6; /* soak up negative margin and allows header to start at top of page*/
        height:150px;
        background:#add8e6;
        width:900px;
        margin:auto;
    }
    #footer {/* footer now sits at bottom of window*/
        width:900px;
        margin:auto;
        height:100px;/* must match negative margin of #outer */
        clear:both;
        height:100px;
        background:yellow;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    h1, h2, p {
        padding:0 10px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    </body>
    </html>
    See the css faq on the sticky footer for more details of the techniques used and how they work.

    You can't use 100% height here:

    Code:
    #contentwrap #content {
        background:white;
        height:100%;
        height:auto;
    }
    Even if it worked it would give you a hundred percent height form where it starts which would take you well below the fold and then your content would always be capped to that height and could never expand. See the faq on 100% height for a better explanation

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ttmt View Post
    The container does have a background color set to white

    Code:
    #contentwrap #content{
    	    background:white;
    	    height:100%;
    	    height:auto;
    	  }
    Oh. Looks like your doing the sticky wrong. Do it all this way instead. http://www.visibilityinherit.com/cod...ooter-demo.php

  6. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The example I put up was a simplified version of what I'm working with. I actually need something like this.

    http://www.ttmt.org.uk/footer/example1.html

    The background is a texture, the header and footer are the full width of the site but the content area that I need to be the full height from the header to the footer is narrower in width than the header and footer.

    Can I use the example you suggested to achieve something like this ?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You can use the same techniques but you have to be creative and your header and footer would need ot be a fixed height for this to work.

    Here's an example. It uses the same techniques but all the neagtive margins and soak up methods must match the heights of the header and footer for this to work.

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    Thanks for your code and explanation, thats nearly exactly what I was trying to do.

    In your example the left column has the textured background used for the body's background - I wanted the background to continue through the left column.

    I have used you code but made the wrap div transparent and used a repeated gif down the right side to create the page.

    http://www.ttmt.org.uk/footer/example2.html

    I'm going to test now but can you see any problems this might cause.

    Thanks again for your help.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    That should be ok

  10. #10
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is still working for what I'm doing but I noticed when I printed the browser (just for my reference) that the footer has doesn't stick to the bottom on the print.

    http://www.ttmt.org.uk/footer/example3/footer.gif

    I've tested in Safari and Chrome on the Mac where the footer floats up, in Firefox on the Mac it prints with the footer at the bottom.

    I don't need to print the page like this, but for future reference - is this normal, is there a way to fix this.

    http://www.ttmt.org.uk/footer/example3

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You need to set up a separate stylesheet for printing and create a simplified layout with no widths, no floats and no background colours (apart from white background and black text). Remove navigation and repeating non essential information when printing and usually remove any non essential foreground images.

    You can't just print a webpage "as is" because it was designed for the web not print. There is no such thing as a float on a piece of paper and you shouldn't try to duplicate what you see on the webpage.

    There are many articles that will help you with this.

  12. #12
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I had this sorted but part of the layout that was left out of the first examples is causing me problems.

    I want the layout to look like this, were the white content block stops before the header and the background is all around the header

    http://www.ttmt.org.uk/footer/example5/

    Using the code here for the sticky footer the content block has to go to the top of the window like this.

    http://www.ttmt.org.uk/footer/example4/


    I've got it partly working by putting the negative margin on the top of the footer to soak up top margin on the content but then I'm left with the space below the footer if you scroll down.

    http://www.ttmt.org.uk/footer/example5/


    Is it possible to do this and have the footer sit at the bottom.


    Thanks in advance for any help any one can offer.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You could do it by repeating the body background on the header to make it appear continuous 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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css" media="screen">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height:100&#37;;
    }
    body {
        background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
    }
    #header {
        width:912px;
        margin:0 auto;
        padding:70px 0 10px;
        position:relative;
        z-index:2;
        background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
    }
    #header #logo {
        float:left;
        margin-right:6px;
    }
    #wrap {
        width:912px;
        margin:0 auto;
        min-height:100%;
      background:transparent url(http://www.ttmt.org.uk/footer/example4/content_bg.gif) repeat-y top right;
        margin-top:-60px;
        position:relative;
    }
    * html #wrap {
        height:100%;
    }
    #main{
        clear:both;
        width:912px;
        overflow:hidden;
        position:relative;
        z-index:2;
    }
    #footer {
        width:912px;
        margin:0 auto;
        height:60px;
        background:transparent url(http://www.ttmt.org.uk/footer/example4/footer_bg.gif) repeat-y top right;
    }
    #footerInner {
        float:right;
    }
    #footerInner li {
        display:inline;
    }
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* - negate effect of float*/
    }
    #wrap:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header"> </a><img id="logo" src="http://www.ttmt.org.uk/footer/example4/logo.png" alt="spa de dia Logo" /></a> <img  id="logoh" src="http://www.ttmt.org.uk/footer/example4/header.jpg" alt="spa image" /> </div>
        <!-- #header -->
        <div id="main">
            <div id="leftCon"></div>
            <!-- #leftCon -->
            <div id="rightCon"> </div>
            <!-- #rightCon -->
        </div>
        <!-- #main -->
    </div>
    <!-- #wrap -->
    <div id="footer">
        <div id="footerInner">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
            </ul>
        </div>
        <!-- #footerInner -->
    </div>
    <!-- #footer -->
    </body>
    </html>
    With the mottled body background the join shouldn't be noticable.

    You could also use my absolute overlay technique instead which doesn't need the body background repeated on the header but uses a white overlay on the left column.

    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css" media="screen">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height:100%;
    }
    body {
        background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
    }
    #header {
        width:912px;
        margin:0 auto;
        padding:70px 0 10px;
        position:relative;
        z-index:2;
    }
    #header #logo {
        float:left;
        margin-right:6px;
    }
    #wrap {
        width:912px;
        margin:0 auto;
        min-height:100%;
        background:transparent;
        margin-top:-60px;
        position:relative;
    }
    * html #wrap {
        height:100%;
    }
    #main{
        clear:both;
        width:912px;
        overflow:hidden;
        position:relative;
        z-index:2;
    }
    #footer {
        width:912px;
        margin:0 auto;
        height:60px;
        background:transparent url(http://www.ttmt.org.uk/footer/example4/footer_bg.gif) repeat-y top right;
    }
    #footerInner {
        float:right;
    }
    #footerInner li {
        display:inline;
    }
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* - negate effect of float*/
    }
    #wrap:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    #bg {
        position:absolute;
        bottom:0;
        right:0;
        width:684px;
        top:270px;
        background:#fff;
        z-index:1;
    }
    * html #bg {
        height:999em;
        top:auto;
    }
    * html #header{    background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg)}
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header"> </a><img id="logo" src="http://www.ttmt.org.uk/footer/example4/logo.png" alt="spa de dia Logo" /></a> <img  id="logoh" src="http://www.ttmt.org.uk/footer/example4/header.jpg" alt="spa image" /> </div>
        <!-- #header -->
        <div id="main">
            <div id="leftCon"></div>
            <!-- #leftCon -->
            <div id="rightCon"> </div>
            <!-- #rightCon -->
        </div>
        <!-- #main -->
        <div id="bg"></div>
    </div>
    <!-- #wrap -->
    <div id="footer">
        <div id="footerInner">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
            </ul>
        </div>
        <!-- #footerInner -->
    </div>
    <!-- #footer -->
    </body>
    </html>
    Either method should do what you want.

    You must leave all the sticky footer code in place as you removed the fixes for IE7,8 and Opera.

  14. #14
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    Thanks again for your help with this.

    Do you have an example where you explain your absolute overlay technique or could you explain what's going on here

    Code:
    #bg {
        position:absolute;
        bottom:0;
        right:0;
        width:684px;
        top:270px;
        background:#fff;
        z-index:1;
      }

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Yes you can find a link to my article from this demo where it is explained in detail


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
  •