Question

I’m trying to achieve, that the div’s will behave like an example on picture, using css:

Is there any clean way to do this? I achieve this using javascript to calculate “left” div height and “main” div width and height. But i dont like this solution…is there any way to do this using css only?

Edit:
Page must not have scrollbar…so page’s height is always max 100%, and no more…

thanks

Answer 1

If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.

In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.

But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height – header height) using Javascript.

Check fiddle here