SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot mcd's Avatar
    Join Date
    Dec 2004
    Location
    Caldwell, NJ
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer DIV height 100% possible?

    I've got a problem that is probably pretty common but I'm not finding any good ways to solve it. I have a fixed height footer on a page and when I view it in a standard browser it looks fine (see left image below). However when I view the site on a mobile device in a vertical orientation (or a standard browser with a very high screen resolution) I see the background of the page below the footer (see right image below).



    Are there any easy ways to set a minimum height of the footer div, and also have it expand vertically in situations where the viewable area is larger?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The solution I always use for that is to make the footer background color the background color of the <body> element. That's the super easy way. Anything else will be fiddly. If your content area relies on the current background color, then you'll have to wrap it in a containing div with the gray background color.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may try the following option
    CSS Code:
    Code:
    <style>
    html{
    	height: 100%;
    }
    body
    {
    	margin-top: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-color:#f6f6fe;
    	height: 100%;
    }
    #wapper{
    	width:930px;
    	margin:0 auto;
    	height: 100%;
    }
    #head{
    	float:left;
    	width:930px;
    	height: 100%;
    	border-left: 1px solid #98b4f0;
    	border-right: 1px solid #98b4f0;
    }
    
    .header{
    	float:left;
    	width:930px;
    	height: 100px;
    	background-color:#98b4f0;
    }
    .body_content{
    	float:left;
    	width:930px;
    }
    .footer{
    	position:absolute;
    	bottom:0;
    	width:930px;
    	height: 60px;
    	background-color:#98b4f0;
    }
    </style>
    HTML Code:

    Code:
    <div id="wapper">
    <div id="head">
    	<div class="header">&nbsp;</div>
    	<div class="body_content">&nbsp;</div>
    	<div class="footer">&nbsp;</div>
    </div>
    </div>
    Make sure your document type is something like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by arup.senapati View Post
    You may try the following option
    CSS Code:
    [CODE]

    #wapper{
    width:930px;
    margin:0 auto;
    height: 100%;
    }
    No you can't do that I'm afraid as that would mean that your element can never grow further than the bottom of the viewport and will just spill out. You should use min-height:100% instead. See the css faq on 100% height for a full explanation.

    It looks like a sticky footer would be more appropriate here:


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
  •