Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make last div stretch to fill screen?

Tags:

html

css

height

I have a site I'm trying to build and I've hit one little snag that's driving me insane. Essentially, on pages without enough content to fill the viewport, I want to have the last div (my footer) fill the rest of the viewport, but it's currently being cut off.

My HTML looks like this:

<body>
  <div id="header"> </div>
  <div id="subNav"> </div>
  <div id="content"> </div>
  <div id="footer"> </div>
</body>

I tried using html, body, footer { height:100%; } but that creates much more space than needed, essentially a full screen length of blank content in the footer.

How do I get my footer just to fill the rest of the screen without adding a scroll bar?

Thanks in advance, One Frustrated Coder.

like image 383
Conor Avatar asked Mar 12 '10 19:03

Conor


2 Answers

I'm pretty sure the only way to do this is by calculating the absolute remainder hight.

I.E, with jQuery

$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );

You would want to do this on window resize to allow for a dynamically resizing window.

$(window).resize(function(){...});
like image 166
Stefan Kendall Avatar answered Sep 22 '22 00:09

Stefan Kendall


I know this is 10 months late so you probably already figured something out. But here is one solution that I use.

(sorry, for some reason I can't get the code thing to work right to show you the code.) Basically wrap a div called "container", or something like that, around all other divs except the footer. The footer div will be just under the container div with all others inside the container.

Set the background color of your body style to be what you want your fill to be at the bottom. Then the background color of the container div would be what your body background color WAS. So everything down to the footer will be what you wanted the background color to be and then the body background color fills the rest of the page.

like image 26
astonishedman Avatar answered Sep 26 '22 00:09

astonishedman