Nested panel height - css

Question

I have a situation similar to: http://jsfiddle.net/gP5Dg/
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
(You may have to expand the html sub-window to see what I mean)
I would like for panel 0, 0 to occupy the full height of the containing panel. How can I do this? I am new to css, and have tried setting the min-height of various parts to 100%, but this has not worked.
The contents of these inner panels can vary. It would be useful if I could control the percentage of the total that each panel in a column can take up. I assume there is no way I can do this without some kind of javascript ?

Answer 1

You can use Javascript to redefine the height size of the panel, you need to define the id of the elements:
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row" id="panel_parent">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body" id="panel00">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
and then when the document is ready you assign the height of the panel00 with the value of the panel parent:
$(document).ready(function(){
$('#panel00').height($('#panel_parent').height());
});
You can also use a percentage of the size, multiplying it by a value, in this case the 50% you have to multiply by 0.5
$('#panel00').ready(function(){
$('#panel00').height($('#panel_parent').height()*0.5);
});

Answer 2

Without any javascript.
First you must set parent height. then you can set panel heights.
For panel height you should set 100% minus margin and padding (10px )
See: http://jsfiddle.net/Kmhtt/
CSS:
.parentHeight
{
height: 500px; !important;
}
.fullHeight
{
height: calc(100% - 10px); !important;
}
HTML:
<div class="col-md-8 col-md-offset-2 parentHeight">
<div class="panel panel-default fullHeight">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row fullHeight">
<div class="col-md-6 fullHeight">
<div class="panel-body fullHeight">
<div class="panel panel-default fullHeight">
<div class="panel-body ">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>