0

I'm trying to do something like the min-height hack, but I have two floats that seem to be conflicting with it:

http://jsfiddle.net/redconservatory/vqFVU/1/

My "innercontainer" div is very short, I would like it take up as much as as possible (or at least, more space) without setting the height in pixels because my page content changes from page to page...

redconservatory
  • 21,438
  • 40
  • 120
  • 189
  • Related: [Expanding the parent container with 100% height to account for any floated content](http://stackoverflow.com/questions/9446988/expanding-the-parent-container-with-100-height-to-account-for-any-floated-conte) – animuson Apr 03 '12 at 22:33

2 Answers2

2

set overflow:auto instead of visible, so that .innercontainer expands to accommodate its contents.

demo at http://jsfiddle.net/gaby/vqFVU/2/

If you want a sticky footer as well look at http://www.cssstickyfooter.com/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • I actually don't want the sticky footer in this situation because of some other design issues...but is it possible to make the .innercontainer longer without setting a pixel height? – redconservatory Apr 03 '12 at 22:40
  • 1
    what do you mean *longer* ... How much longer.. with what restriction on how short/long should it be ? the example above just shows how to make it at least the same as it contents.. if you add `padding-bottom` you can extend it event more [***example***](http://jsfiddle.net/gaby/vqFVU/5/) (*height is not needed*) – Gabriele Petrioli Apr 04 '12 at 11:48
1

http://jsfiddle.net/vqFVU/4/

javascript is the easiest way. You cant do that with pure CSS since every client can have a different size window.

JohnWolf
  • 1,147
  • 14
  • 28