Fill browser window with footer

**leegolding** · Jul 11, 2007 14:37

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.

**AvengeX** · Jul 12, 2007 09:04

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.

**leegolding** · Jul 12, 2007 09:11

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.

Originally Posted by AvengeX

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.

**Dan Schulz** · Jul 12, 2007 09:34

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>

**leegolding** · Jul 12, 2007 09:36

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.

Originally Posted by Dan Schulz

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>

**Dan Schulz** · Jul 12, 2007 09:45

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?

**leegolding** · Jul 12, 2007 12:17

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.

**leegolding** · Jul 12, 2007 16:12

Is this a really difficult CSS problem then? Or are my explanations of what I require not making sense?

Lee.

**CaryD** · Jul 12, 2007 19:48

Originally Posted by leegolding

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?

User Tag List

Thread: Fill browser window with footer

Thread Tools

Display

Fill browser window with footer

Bookmarks

Bookmarks

Posting Permissions