How to make last div stretch to fill screen?_问答_开发者

How to make last div stretch to fill screen?

开发者 https://www.devze.com 2022-12-22 15:21 出处：网络

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) fi

相关专题：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.

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

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.

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.)