2

Is there a way to have a div extend to the bottom of the page no matter what the zoom is? I have tried to use fixed positioning and absolute positioning and I can't get the sidebar to extend just to the end of the viewable area?

Here is a screenshot of what I have so far. The scroll bar on the side only applies to the column on the right. I want that to extend to the bottom of the viewable area along with the map. This is on minimum zoom.

http://flic.kr/p/a5mEU7

George Muresan
  • 83
  • 2
  • 8
  • Possible duplicate of this: http://stackoverflow.com/questions/147528/how-to-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no-con . Either way I am pretty sure that stackoverflow question answers the one you have. – Adrian Jul 20 '11 at 01:39
  • That isn't what I want. I want the sidebar to extend to the bottom of the view even if there is not enough content or too much content. – George Muresan Jul 20 '11 at 01:53
  • Right the question in the other post is how to force a div to extend to the bottom of the page even though it had "no" content. The accepted answer to that question will solve for your scenario as well. Cliff notes version is to set your div to 100% height and make sure it's container is not restricting it's height. – Adrian Jul 20 '11 at 01:56
  • I solved this by setting the position of the sidebar to position: fixed, bottom:0px, height:80%, and the header with height:20%. Barnzy's answer also works. – George Muresan Jul 21 '11 at 17:39

1 Answers1

4

I have made a jsfiddle version of your page at here.

I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.

-UPDATE-

The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)

Flux
  • 391
  • 2
  • 14