CODEWITHSUNDEEP
csshtmlheight
Conor
Conor

Reputation: 670

How to make last div stretch to fill screen?

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.

Upvotes: 8

Views: 9964

Answers (3)

astonishedman
astonishedman

Reputation: 151

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.

Upvotes: 8

user241244
user241244

Reputation:

If you don't want to go the jQuery route, the poor man's version of this is giving #content a min-height that will make it work in most displays, and/or by giving your footer plenty of padding on the bottom. It might trigger a scrollbar in some instances, as you're just controlling how short the page can be, though.

(Or you can just accept it as a limitation of the medium. Stack Overflow, for example, just has its footer float above whitespace if the page is too short.)

Upvotes: 0

Stefan Kendall
Stefan Kendall

Reputation: 67832

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(){...});

Upvotes: 8

Related Questions