SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Fill browser window with footer

    Hi friends,

    I have a design layout that uses a wrapper to display my design with vertical shadow borders on the left and right.

    http://www.sitepoint.com/forums/show...56#post3471556

    CSS
    --------------------------------------
    html { background-color: #64371B }

    body { font-size: 70% }
    body { width:780px; margin:0 auto; background-image:url(../images/index_background_image.png); background-repeat: repeat-y; padding:0 6px }

    #wrapper { width:780px }
    --------------------------------------

    HTML
    --------------------------------------
    <body>
    <div id="wrapper">
    Content.......images, etc.
    </div>
    </body>
    --------------------------------------

    I need to get the wrapper to expand to the height of the browser window. At the moment, it only expands to the content. Therefore, the shadows don't go all the way down the page.



    Furthermore, I will need to split the design into a header, middle and footer.

    <div id="wrapper">
    <div id="header">
    </div>
    <div id="middle">
    </div>
    <div id="footer">
    <div>
    </div>

    Again, the footer must expand to the bottom of the browser window.

    Thanks,

    Lee.

  2. #2
    SitePoint Enthusiast AvengeX's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. To be honest, the #wrapper part of your layout is redundant and should be removed.

    Code:
    body {
    font-size: 70&#37;;
    width:780px;
    margin:0 auto;
    background: #64371B url(../images/index_background_image.png) repeat-y center;
    padding:0 6px;
    }
    You can now remove #wrapper as it is not needed, and remove the html style too.

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so far :-)

    The header div will be fixed height. The content div will expand with the size of its content. And the footer div will need to expand to the bottom of the browser window, if the content div doesn't have enough content to push the footer to the bottom.

    Any ideas?

    Thanks,

    Lee.

    Quote Originally Posted by AvengeX View Post
    Try this. To be honest, the #wrapper part of your layout is redundant and should be removed.

    Code:
    body {
    font-size: 70%;
    width:780px;
    margin:0 auto;
    background: #64371B url(../images/index_background_image.png) repeat-y center;
    padding:0 6px;
    }
    You can now remove #wrapper as it is not needed, and remove the html style too.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I have an idea. Paul O'B has a "sticky footer" here on the CSS boards. I forget what thread it's in, but it's either in the 3 column CSS or CSS Tips and Tricks threads. Anyway here it is for good measure (I used EMs for this, and gave the footer a background color so you can see it more clearly).
    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>
    <title>Sticky Footer at Bottom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen,projection">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	height: 100&#37;;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	font: normal 85%/140% "Lucida Console", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    }
    
    #container {
    	margin-bottom: -3em;
    }
    
    * html #container {
    	height: 100%;								/* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
    }
    
    html>body #container {
    	height: auto;								/* for modern browsers as IE 5 and 6 treats height as min-height anyway */
    	min-height: 100%;							/* squashes an IE 7 bug */
    }
    
    	#clear-footer {								/* needed to make room for the footer */
    		clear: both;
    		height: 3em;
    	}
    
    #footer {
    	background: #8EF;
    	clear: both;
    	color: inherit;
    	height: 3em;
    }
    	#footer p {
    		font-size: 0.85em;
    		padding-top: 1em;
    		text-align: center;
    	}
    
    </style>
    </head>
    <body>
    <div id="container">
    	<!-- the rest of your page HTML, such as the header, menu, page content, sidebar goes here -->
    	<div id="clear-footer"></div> <!-- need to make room for the footer -->
    </div>
    <div id="footer">
    	<p>
    		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To
    		Scare Unsuspecting Children Reserved.
    	</p>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply. Before I try this, I don't want the footer to stay fixed height and be pinned to the bottom of the window. I want it to stay at the bottom of the content div, and if the bottom of the footer doesn't reach the bottom of the browser window, it should expand and show more of its background color.

    Lee.

    Quote Originally Posted by Dan Schulz View Post
    Yeah, I have an idea. Paul O'B has a "sticky footer" here on the CSS boards. I forget what thread it's in, but it's either in the 3 column CSS or CSS Tips and Tricks threads. Anyway here it is for good measure (I used EMs for this, and gave the footer a background color so you can see it more clearly).
    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>
    <title>Sticky Footer at Bottom</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen,projection">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	height: 100%;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	font: normal 85%/140% "Lucida Console", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    }
    
    #container {
    	margin-bottom: -3em;
    }
    
    * html #container {
    	height: 100%;								/* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
    }
    
    html>body #container {
    	height: auto;								/* for modern browsers as IE 5 and 6 treats height as min-height anyway */
    	min-height: 100%;							/* squashes an IE 7 bug */
    }
    
    	#clear-footer {								/* needed to make room for the footer */
    		clear: both;
    		height: 3em;
    	}
    
    #footer {
    	background: #8EF;
    	clear: both;
    	color: inherit;
    	height: 3em;
    }
    	#footer p {
    		font-size: 0.85em;
    		padding-top: 1em;
    		text-align: center;
    	}
    
    </style>
    </head>
    <body>
    <div id="container">
    	<!-- the rest of your page HTML, such as the header, menu, page content, sidebar goes here -->
    	<div id="clear-footer"></div> <!-- need to make room for the footer -->
    </div>
    <div id="footer">
    	<p>
    		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To
    		Scare Unsuspecting Children Reserved.
    	</p>
    </div>
    </body>
    </html>

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The footer only stays at the bottom of the content window if there isn't enough content to push it over the fold. If I understood you correctly, that is what you wanted, right?

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. If the height of the header div, content div and footer div doesn't fill up the height of the browser window, then I would like the footer div's height to stretch to the bottom of the browser window.

    I think playing with height: 100% in the footer div CSS, or such like would do it on the footer div. But no luck trying to work it out for myself.

    Code CSS:
    #footer { background-color: #7C4B2D; background-image: url(../images/index2_r5_c1.gif); background-repeat: no-repeat; background-position: top; text-align: center; color: #f7f3df; height: 100% }
     
    #footer a { font-weight: bold; color: #f7f3df }

    Any ideas?

    Lee.

  8. #8
    SitePoint Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this a really difficult CSS problem then? Or are my explanations of what I require not making sense?

    Lee.

  9. #9
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leegolding View Post
    I think playing with height: 100% in the footer div CSS, or such like would do it on the footer div. But no luck trying to work it out for myself.
    Seems like you would want to use 100% min-height on the wrapper div. The footer can't be 100% height because some of the page height will be used by the header and content.

    FAQ: How do I get min-height for all modern browsers?

    FAQ : How is 100% height achieved?


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
  •