• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

Set up CSS so HTML is always 100% of browser view and footer is always on the bottom

I want my site to display at 100% of the vertical space of the user's browser, with the footer always at the bottom of the page. This is especially important on pages that don't have a lot of content. I found a clever fix that has worked for me in the past here:

http://www.dave-woods.co.uk/index.php/css-fixed-footer/

Dave assigns the HTML height to 100% and places the footer at the bottom of that with some margin adjusting.

This works fine on this page:

http://justthedriver.com/employment/employment.htm

BUT doesn't work on this page:

http://justthedriver.com/contact/contact.htm

I'm guessing it has something to do with the Column L & Column R spacing on the Contact.htm page? Not sure though.

Please advise.

Thanks Experts!
0
TonyT7220
Asked:
TonyT7220
  • 4
  • 3
1 Solution
 
David S.Commented:
It works in neither page for me here.

One issue is that <body> needs its height set to 100% as well as <html>.

There are multiple ways to do it. Below is the approach I prefer. (The first rule should probably go in layout.css and the others in style3.css.)
html,
body {
	border: 0 none;
	margin: 0;
	padding: 0;
	height: 100%;
}

#container {
	background-color: #fff;
	width: 900px;
	margin: -40px auto 0;  
	/* negative top margin is to allow spacer for the footer */
	border: 1px solid #b7b7b7;
	border-top: 0 none;
	border-bottom: 0 none;
	min-height: 100%;
}
* html #container {height:100%} /* for IE6 */

#masthead {
	text-align: right;
	background-color: #369;
	width: 900px;
	padding-top: 40px; /* total height of the footer */
}

Open in new window

P.S. Why are style attributes used in those pages? It's best to keep all styles in external stylesheets (and  inside <style> elements as well, if necessary).
0
 
TonyT7220Author Commented:
Thanks for this..let me try it out ans let you know.
0
 
TonyT7220Author Commented:
Here is the page with your style specs:

http://justthedriver.com/employment/employment.htm

Not quite there.

Please advise.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
David S.Commented:
It seems you didn't copy the "html," from the first rule. The selectors should be "html, body", not just "body"

Also you need to remove the inline styles from the "#container" element.
0
 
TonyT7220Author Commented:
Thanks Kravimir,

I corrected those errors on the following page:

http://JustTheDriver.com/employment/employment.htm

The one last thing the "container" div's background color of white is not going all the way down to the footer and a wedge of the grey background color shows thru. How do I correct this?

Thanks!
0
 
TonyT7220Author Commented:
Tested this and it worked. Thanks Kravimir!
0
 
David S.Commented:
You're welcome. I'm glad I could help.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now