Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post

    Sticky Footer Problems

    I'm trying to make a site layout with a sticky footer and a header that go the width of the page. The content div should be 960px wide, and the height should go from the bottom of the header to the top of the footer. My problem is that I can't figure out how to get the content div to go just to the footer. The page (and content div) want to extend the height of the header past where the page should end.

    Thanks

    Code:
    <?xml version='1.0' encoding='UTF-8'?>
    <!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>
    		<link rel="stylesheet" type="text/css" href="css/reset.css" />
    		<link rel="stylesheet" type="text/css" href="css/style.css" />
    		<title>FBK</title>
    	</head>
    	<body>
    		<div id ='wrap'>
    			<div id='header'>
    			</div>
    			<div id='content'>
    			</div>
    			<div id='footer'>
    			</div>
    		</div>
    	</body>	
    </html>
    Code:
    html{
    	height: 100%;
    	min-height: 100%;
    }
    
    body{
    	min-height: 100%;
    	width: 100%;
    	height:100%;
    }
    
    #wrap{
    	height:auto;
    	height:100%;
    	min-height:100%;
    	position:relative;
    	margin:auto;
    }
    
    #header{
    	background: blue;
    	height: 152px;
    }
    
    #content{
    	background: #555;
    	min-height: 100%;
    	margin: 0 auto;
    	width: 960px;
    
    }
    
    #footer{
    	margin-bottom: 41px;
    	height: 59px;
    	background: red;
    	position:absolute;
    	width:100%;
    	bottom:0;
    }
    How it looks:


    How it should look:
    Last edited by mikhial66; 08-06-2011 at 11:04 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    height: auto !important;
    the auto needs an !important, this is an ie hack

    here's what a sticky footer should look like:

    Code:
    <body>
      <div class="page-wrap">
         <div id="header"></div>
         <div class="content"></div>
         <div class="footer-ctr"><!-- Leave Empty --></div>
      </div>
      <div class="footer-wrap">
         <!-- Footer script goes here -->
      </div>
    </body>
    Code:
    html, body {
     height: 100%;
    }
    
    .page-wrap {
    	min-height: 100%;
    	margin: 0 auto -250px;
    }
    
    .footer-wrap, .footer-ctr {
    	height: 250px;
    	clear: both;
    }
    I left out the height: auto !important; and height: 100%; because I don't code for ie6

    let me caution you, since I've been using sticky footers for a very long time.

    do you really need one? will there be a lot of pages that don't have enough content to fill the page
    for very large screens, the footer will be disconnected from the content (for example, your content will fill half the screen and a tiny little footer will be at the bottom)
    Last edited by Sammy12; 08-07-2011 at 06:56 AM.

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post
    The code above has the footer working as it should. The problem is that I want to content div to take up all of the vertical space between the header and footer.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    haha yeah the code you posted isn't a sticky footer

    http://ryanfait.com/resources/footer...ottom-of-page/

    if you literally plug that code into a new doc it will make the footer touch the exact bottom without a y-scrollbar

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post
    That doesn't help me at all. I DO have a sticky footer. If you literally plug my code into a new doc, it will stay at the bottom. Like I said in the OP and my reply, I need the content div to behave differently, not the footer. I could fix the y-scroll bar in 5 seconds, but that wouldn't fix my content div

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    nah nah man this isn't a sticky footer. you just absoluted the footer to the bottom. that doesn't work. i think you have your terms wrong a "sticky footer" was "founded" by ryan fait. eh kind of like how eric mayer "founded" resetting tags with vertical-align: baseline; & bc:trasnsparent, not really sure who really thought of the idea. anyways, the method your using is NOT a sticky footer!!!!!!

    http://ryanfait.com/resources/footer...ottom-of-page/
    This is the only way

    Code:
    #footer{
    	margin-bottom: 41px;
    	height: 59px;
    	background: red;
    	position:absolute;
    	width:100%;
    	bottom:0;
    }
    Last edited by Sammy12; 08-07-2011 at 11:31 PM.


  •  

    Posting Permissions

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