www.webdeveloper.com
Results 1 to 9 of 9

Thread: Stretch footer to bottom of browser window

  1. #1
    Join Date
    Dec 2005
    Posts
    67

    Stretch footer to bottom of browser window

    I'm not looking for a Sticky Footer solution here. What I want is for the footer, the final containing div, to extend to the bottom of the browser window.

    Here's the code. If I have to use Javascript, that's fine. This doesn't have to be a pure CSS solution.

    Thanks!

    Code:
    *{margin:0;padding:0;}
    
    html {
    } 
    
    body {
    background: #000 url(../images/bg_patt.gif) repeat left top;
    }
    
    #header {
    margin:0px auto;
    height:68px;
    width:818px;
    overflow:hidden;
    background-color:pink;
    }
    
    #navbar {
    margin:0px auto;
    height:39px;
    width:818px;
    overflow:hidden;
    background-color:teal;
    }
    
    #main_content {
    margin:0px auto;
    overflow:hidden;
    width:818px;
    background-color:yellow;
    }
    
    #footer {
    margin:0px auto;
    height:39px;
    width:818px;
    padding-bottom:60px;
    background-color:magenta;
    }

    Code:
     <!--begin header-->
        <div id="header">
        header
        </div>
        <!--end header-->
        
        <!--begin navbar-->
        <div id="navbar">
        navbar
        </div>
        <!--end navbar-->
        
        <!--begin main_content-->
        <div id="main_content">
            maincontent
        </div>
        <!--end main_content-->
        
        <!--begin footer-->
        <div id="footer">
            footer
        </div>
        <!--end footer-->

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    I'm guessing you're talking about fixed positioning when you say "sticky footer." Try absolute positioning instead:

    Code:
    div#footer
    {
       position: absolute;
       bottom: 0;
    }

  3. #3
    Join Date
    Dec 2005
    Posts
    67
    I appreciate the reply, but, to be clear, I am NOT looking for a sticky/fixed footer solution.

    I just want the footer to extend 100% to fill the vertical space in the browser window.

    Thanks again.

  4. #4
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    oh, in that case you're going to have to apply a height to the footer using a percentage like 50&#37; or however much you want. Then make the rest of the page have the remaining height.

  5. #5
    Join Date
    Dec 2005
    Posts
    67
    Thanks again, but I don't believe that works. At least not with the code I provided. Are you able to accomplish that using the code I provided? Can you show me an example?

    Thanks.

  6. #6
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    It worked for me. You just have to set the heights of each container properly. Here's what I used:

    Code:
    *{margin:0;padding:0;}
    
    html {
    } 
    
    body {
    background: #000 url(../images/bg_patt.gif) repeat left top;
    height: 100%;
    }
    
    #header {
    margin:0px auto;
    height:15%;
    width:818px;
    overflow:hidden;
    background-color:pink;
    }
    
    #navbar {
    margin:0px auto;
    height:15%;
    width:818px;
    overflow:hidden;
    background-color:teal;
    }
    
    #main_content {
    margin:0px auto;
    overflow:hidden;
    height: 50%;
    width:818px;
    background-color:yellow;
    }
    
    #footer {
    margin:0px auto;
    height:20%;
    width:818px;
    padding-bottom:60px;
    background-color:magenta;
    }
    Remove that padding value. Or you could use a percentage value instead and subtract that value from the footer's height. For example padding-bottom: 3% and height: 17%

  7. #7
    Join Date
    Dec 2005
    Posts
    67
    Thanks again for the response.

    I don't think that's going to work for me, since I can't have the main_content div be a fixed height. It needs to expand to contain the content within.

  8. #8
    Join Date
    Aug 2010
    Location
    Ohio
    Posts
    136
    Question: Are you looking for the footer to be at the bottom of the window if the content doesn't fill window? Does this mean if the content extends past the bottom of the window you want the footer not to be visible unless you scroll down?

  9. #9
    Join Date
    Mar 2011
    Posts
    1
    To set a custom height locked to somewhere:

    CSS---------------

    Code:
    body,html{
        height:100%;}
        #outerbox{
        	width:100%;
        	position:absolute;   /* to place it somewhere on the screen */
        	top:130px;            /* free space at top */
        	bottom:0px;}         /* makes it lock to the bottom */
        #innerbox{
            width:100%;
        	position:absolute;				
        	min-height:100%; !important /* browser fill */
        	height:auto;}        /*content fill */
    HTML--------------

    Code:
        <div id="outerbox">
             <div id="innerbox"></div>
        </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles