auto resizing a div and all parent divs - html

Question

A layout has the following arrangement: (using MVC3 - The whole html is in the Layout.cshtml)
A Top header (containing a Banner and Menu bar)
Contents (Divided in Left and Right panes).
Footer
The contents of the Right pane contain tabs, and the height can vary depending on the opened tab.
I want to make the Contents div auto adjust to the height and not create a scrollbar (Not browser scroll bar).
This is somewhat achieved but it breaks the rest of the CSS.
Here is the CSS :
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
/* height: 100%; */
}
#Wrapper {
border: 1px solid #6A89C1;
height: 100%;
margin: 0px auto;
min-height: 750px;
min-width: 700px;
width: 100%;
font-size: 0.75em;
}
header {
background-color: #abcdef;
height: 19%; /* did not keep it 20% due to some Background repeat issues.. */
margin: 0px;
border-bottom: 2px outset #FFFFFF;
width: 100%;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#Banner {
height: 72%;
width: 100%;
padding-top: 5px;
}
#Menu {
height: 25%;
width: 100%;
}
#Contents {
height: auto; /*65%;*/
width: 100%;
clear: both;
}
#Contents #LeftPane {
background-color: #E9F1FF;
border-right: 1px solid #B9D4FF;
height: 100%;
min-height: 300px;
width: 24.8%; /* Should not be exactly 25% as it causes RightPane div to shift downwards */
}
#Contents #RightPane {
background-color: #FFFFFF;
height: 100%;
width: 75%;
overflow: auto;
}
.Left {
float: left;
}
.Clear {
clear: both;
}
footer {
background-color: #6A89C1;
clear: both;
height: 15%;
width: 100%;
margin: 0px;
min-height: 50px;
}
#Wrapper, footer {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
The whole center part needs to grow automatically but the Layout (propotions) should be same
Attached also is the image after adjusting to the given CSS
(notice the menu bar Bg and left pane & footer heights )
Hope to have explained the question adequately :)

Answer 1

I would avoid using heights all together, the browser will adjust element heights according to their contents.

Answer 2

You should get the opened tabs height with javascript (or jquery) and assign this height to the content container.

Answer 3

http://www.w3schools.com/cssref/pr_pos_overflow.asp
overflow: auto
causes scroll bar.
You are able to do this using javascript (when tab is changed then change height depending on height of tab). I'm not sure if there is any other way.

Answer 4

Thanks for all the help.. !
found a possible solution of not putting all the contents in the wrapper div rather independent of each other i.e.
The Header div is separate div (parent is the body not the wrapper)
same for Contents and footer div..
Kind regards and again thank you for all the suggestions,
A.Ali