Make table 100% of parents height? - html

Question

I have made a jsfiddle to show my problem:
jsFiddle
<section class="text clearfix" data-theme="white">
<div class="bemassung">
<h3>BESCHICHTUNGEN BIS ZU FOLGENDEN MAXIMALEN ABMAßEN DURCHFÜRBAR:</h3>
<table>
<tr>
<td>Art der Beschichtung</td>
<td>Länge</td>
<td>Breite</td>
<td>Höhe</td>
<td>Gewicht</td>
</tr>
<tr>
<td>
<img src="assets/images/charts/leistungsangebot/nasslack.png" /> <b>Nass</b>
</td>
<td>18.000 mm</td>
<td>4.000 mm</td>
<td>4.000 mm</td>
<td>40.000 kg</td>
</tr>
</table>
</div>
</section>
section {
background-color:black;
}
.bemassung {
border:20px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
border-left:0;
border-right:0;
border-bottom:0;
box-sizing:border-box;
width:924px;
height:100px;
margin-top:50px;
background-color:rgb(219, 215, 213);
}
.bemassung h3 {
padding-left:20px;
padding-top:20px;
}
.bemassung table {
width:100%;
height:100%;
background-color:rgb(219, 215, 213);
}
.bemassung table tr:first-child {
background-color:rgb(237, 236, 235);
}
.bemassung table td {
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
border:1px solid #999;
color:rgb(98, 89, 87);
font-weight:normal;
}
.bemassung table td b {
font-size:1.2em;
color:rgb(98, 89, 87);
}
.bemassung table td:first-child {
border-left:0;
}
.bemassung table td:last-child {
border-right:0;
}
.bemassung table tr:last-child td {
border-bottom:0;
}
.bemassung img {
height:40px;
padding-right:40px;
vertical-align:middle;
}
.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
As you can see the section is not the full height of the table. I tried to search for solutions, like 100% height, etc., but nothing seems to work. What can I do? I can't use a fixed height.

Answer 1

Use the following CSS. (I have removed the table color so you can see the sizing for section)
http://jsfiddle.net/rutk5mLb/4/
section{
position: absolute;
height: auto;
background-color:yellow;
}
.bemassung{
border:20px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
border-left:0;
border-right:0;
border-bottom:0;
box-sizing:border-box;
width:924px;
}
.bemassung h3{
padding-left:20px;
padding-top:20px;
}
.bemassung table{
width:100%;
height:100%;
}
.bemassung table tr:first-child{
background-color:rgb(237,236,235);
}
.bemassung table td{
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
border:1px solid #999;
color:rgb(98,89,87);
font-weight:normal;
}
.bemassung table td b{
font-size:1.2em;
color:rgb(98,89,87);
}
.bemassung table td:first-child{
border-left:0;
}
.bemassung table td:last-child{
border-right:0;
}
.bemassung table tr:last-child td{
border-bottom:0;
}
.bemassung img{
height:40px;
padding-right:40px;
vertical-align:middle;
}
.clearfix:after{visibility:hidden;display:block;content:"";clear:both;height:0}