Stretching the footer to the bottom of a browser

I'd like to make the footer stretch just to the bottom of a browser without going any farther. All browsers are different, so the footer's height needs to be flexible adjusting itself to this or that particular browser. The site: http://fastjobster.com

Right now I have this:

.footer {
width: 100%;
height: 150px;
border-top: 1px solid #D9D9D9;
background-color: #F0F0F0;
font-size: 13px;
color: #888888;
padding: 20px 0px 0px 0px;
margin: 140px 0px 0px 0px;
}

Code (markup):

 

Try This

.footer {
width: 100%;
height: auto;
overflow: hidden;
border-top: 1px solid #D9D9D9;
background-color: #F0F0F0;
font-size: 13px;
color: #888888;
padding: 20px 0px 0px 0px;
margin: 140px 0px 0px 0px;
position: fixed;
bottom: 0;
}

Code (markup):

 

No, it didn't do it. I don't want it to be position: fixed; but when I remove it there's a gap at the bottom of the browser and the footer.

 

I don't see any gap between browser and footer, can u explain ?

 

I tested your solution and didn't work. So, I just went back to where I was before. What you see is the old CSS. The point is I don't need a fixed positioning. Do you know how to make it work without the fixed positioning?

 

ok this is what i see.. how do u want it to be like ?

 

I see. You see that scroll bar on the right? I want it to go away. But it will only be possible if the footer stretches its height just to the bottom of a browser. But the browsers are all different. I chose the height of 150px because it covered all browsers. But, ideally, I want the footer to stretch its height to any browser automatically. Basically, I want to get rid of that scroll bar on the index page for all browsers. Hope it makes sense.

 

Okay,
Try This if you want footer to be stacked at bottom on all big resolutions too..

.footer {
background-color: #f0f0f0;
border-top: 1px solid #d9d9d9;
bottom: 0;
color: #888888;
font-size: 13px;
height: auto;
margin: 140px 0 0;
overflow: hidden;
padding: 20px 0 0;
position: absolute;
width: 100%;
}

Code (markup):

Or This if you don't want it to be overlapped on smaller screens

.footer {
background-color: #f0f0f0;
border-top: 1px solid #d9d9d9;
color: #888888;
font-size: 13px;
height: auto;
margin: 140px 0 0;
overflow: hidden;
padding: 20px 0 0;
width: 100%;
}

Code (markup):

 

If you dont want scrollbars then just add this to the css:
body {overflow:hidden;}

Might also need:
html,body {height:100%}

However expecting it to work correctly for ever browser is a fantasy. I doubt you get it consistent for even different version of the same browser, and different resolutions and user setting are going to break it more often ten it renders correct.

Just because some rigid impractical layout works on your computer does not mean it will work correctly for anyone else even with massive scripting.

Cd&

 

What you are looking for is called a 100% min-height layout. Thankfully it seems your footer is a fixed height, which makes doing this a lot easier.

<div class="heightWrapper">
	<p>
		All your content EXCEPT the footer goes here
	</p>
<!-- .heightWrapper --></div>

<div id="footer">
	Footer Content here
<!-- #footer --></div>

Code (markup):

html, body {
	position:relative; /* help fix Opera and IE8 layout bugs */
	height:100%;
}

.heightWrapper {
	min-height:100%;
	padding-bottom:150px; /* make room for the footer */
}

#footer {
	margin-top:-150px;
	height:150px;
}

Code (markup):

You will also want to set a height:1% on some child element of .heightWrapper or IE8, Opera and some versions of Gecko based browsers to make it so that when the browser window is resized the layout changes with it.

That will push the footer to the bottom if the content is shorter than the window, but push it off the bottom of the window if the content is taller.

You can also do this using a table, but that's abusing the table element. The new Flex-box can also do this, and I consider it viable though a bit tricky to implement -- doesn't work in IE9/earlier, but I would be tempted to consider that an "Oh well" situation. I'm that way about most CSS3 things, some crappy older browser doesn't get rounded corners and drop shadows, OH WELL. If the visitor can still access the CONTENT, that's all that matters.

 

Oh, and if you want the code I posted to work in IE6 (if you care) just do:

* html .heightWrapper { height:100%; }

Being sure that .heightWrapper is not set to any sort of overflow condition. IE6/earlier incorrectly treats height as if it were min-height -- something IE7/newer and every other browser does not do.