How to set scroll height? - html

Question

+-------------+ +---------------------------------+
| | | |
| 1 | | |
| left-nav | | |
| | | |
+-------------+ | 3 |
| | | |
| | | |
| 2 | | very long contents here |
| | | which causes to scroll |
| other | | vertical bar. Setting |
| remaining | | this content to 100% height? |
+-------------+ +---------------------------------+
What is height: 100%; actually? Is it applied to a page window or till the scroll ends?
I have following html...
<div id="wrapper">
<div id="left-nav">
<!--contents of 1-->
</div>
<div id="yourad">
<!--contents of 2--->
</div>
<div id="main-contents">
<!--contents of 3-->
</div>
</div>
My css is as follows....
#wrapper{position: relative; width: 1007px; margin: 0 auto;}
#left-nav{width: 329px; height: 100%; background: grey;float: left;}
#yourad{height: 100%; background: blue;}
#main-contents{margin-left: 329px; padding: 10px; background: pink;}
****Note: ****
First see my demo to understand my problem Here
Contents of 1 actual height: I don't know.
Contents of 2 actual height: I dont't know.
Contents of 3 actual height: I don't know.
Because I may need for some pages less contents and some pages more contents.
I've tried by using height: 100%; in html, body, wrapper, left-nav, yourad, but could not success.

Answer 1

Height 100%, when applied to a child element, will make the element stretch to the full height of its parent.
For instance, if you set your #wrapper {height:600px} and your #content{height:100%} the content div will now have a height of 600px.
The confusion comes in because the default overflow property is: overflow:visible - will not be clipped by contrainsts of containing element. So without explicitly setting an overflow of hidden or scroll, the content will flow outside of the container.
You can see this being demonstrated in your example (http://jsfiddle.net/RrmK3/) by setting a background color on the parent div.
<div id="wrapper" class="wrap">
<div id="left-nav">
<h4>Menu Title</h4>
<ul>
<li>Menu Item</li>
</ul>
<div id="yourad">
You add is in your sidebar. It is not in your question :)
</div>
</div>
<div id="contents">
<h1>Indenting Code Keeps you Sane.</h1>
</div>
</div>
#contents{ margin-left: 330px; margin-top: 5px; height:100%; }
#wrapper{position: relative; width: 1007px; margin: 0 auto; height:200px; background:pink;}

Answer 2

Ok, this is really hard to explain in writing but I'll give it a shot.
When you set your body to 100%, it will always stay at the height that it started at, so it will cut off anything below the visible body.
The problem here is that one of your columns has to be a fixed height so your wrapper can know how to translate percents. Since you wont know what the height of left-nav is, you can cheat and use javascript to set the height of your wrapper to the height of your left-nav and the content text will overflow correctly..
Enough with the words, here's how you do it:
$('#wrapper').height($('#left-nav').height());
http://jsfiddle.net/Y7PhV/106/