Looking to create a layout with the following structure: (using MVC3 - The entire HTML is in the Layout.cshtml)
- A top header consisting of a banner and menu bar
- Content divided into left and right panes
- Footer
The right pane contains tabs, and its height may vary based on the selected tab.
The goal is to have the Contents div adjust its height automatically without creating a scrollbar (excluding the browser scroll bar).
While this has been somewhat achieved, it disrupts the rest of the CSS.
Here is the CSS code:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
/* height: 100%; */
}
#Wrapper {
border: 1px solid #6A89C1;
height: 100%;
margin: 0 auto;
min-height: 750px;
min-width: 700px;
width: 100%;
font-size: 0.75em;
}
header {
background-color: #abcdef;
height: 19%;
margin: 0;
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%;
}
#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: 0;
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 main focus is for the center part to expand automatically while maintaining the layout proportions.
An image has also been included showing the adjustments made using the provided CSS.
(notable changes in menu bar background, left pane, and footer heights)
Hoping that the question has been adequately explained :)