100% Div height without scrollbar?

If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% 23px high.

If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high. In the future you will have in css calc() hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.

Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.

1 Be aware that calc() won't work on all browsers and that Javascript can be disabled. – Shikiryu Nov 25 '10 at 8:49 Actually the calc() thing is a CSS thing, and won't work on almost no browser. – Gidon Nov 25 '10 at 8:50 The JS option I suggest, will not work on browsers without javascript, but than again: these people are used to sites not looking at their best because they have no javascript.

The 23px scrollbar will be the least of their annoyances. – Gidon Nov 25 '10 at 8:51.

The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines. If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.

Often the exact header size is known, (often a menu or something like that). So you don't want to give the header a variable height. – Gidon Nov 25 '10 at 8:34 Yes, because of that I recommend you to use the concrete values for the root elements (container,header in your case), such as 1024x800, 23x800 or so.

Then use percentage values inside. – Hoàng Long Nov 25 '10 at 9:02.

Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent. #header { position: absolute; width: 100%; height: 23px; top: 0; left: 0; } #sidewrapper, #contentwrapper { float: left; width: 50%; height: 100%; } #sidewrapper .

Content, #contentwrapper . Content { margin-top: 23px; }.