After observing a peculiar issue on Firefox, Chrome, and IE while using Win XP, I need assistance with CSS for three vertically aligned block elements within a container. My goal is to set a minimum height of 600 pixels for the container and ensure that the middle element expands to occupy maximum vertical space. Despite specifying height:100% for the middle element, it fails to fill the available space as desired. Below is the HTML code snippet:
<div class="productDetailsPanel">
<div class="tabPanel">
<div class="tabBar">Tab Bar</div>
<div class="tabContent">Content</div>
<table>
<tr>
<td><button value="Save">Save</button></td>
<td><button value="Reset">Reset</button></td>
</tr>
</table>
</div>
</div>
This is the corresponding CSS:
.productDetailsPanel {
width: 74%;
min-height: 600px;
overflow-x: hidden;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 10px 0 5px;
background-color: yellow;
}
.tabPanel {
height:100%;
width: 100%;
position: relative;
background-color:pink;
padding: 2px;
}
.tabBar {
height: 2em;
background-color: orange;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 2em;
}
.tabContent {
position: relative;
top: 0px;
background-color: silver;
width: 100%;
height: 100%;
}
To provide further clarity, I have created a JSFiddle illustration of this conundrum here: http://jsfiddle.net/XAYWZ/. Your expertise in adjusting the CSS to ensure the middle panel occupies maximum vertical space would be greatly appreciated.