2014-10-10 159 views
-2

我已经做了的jsfiddle显示我的问题:让表格100%的父母身高?

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 
} 

正如你所看到的部分不表的整个高度。我试图寻找解决方案,如100%高度等,但似乎没有任何工作。我能做什么?我无法使用固定的高度。

+0

我不能让一个环节出我的jsfiddle的。 – 2014-10-10 09:17:16

+0

在我的Chrome上它看起来很好。请更好地解释问题是什么以及预期的结果。如果它只针对特定的浏览器,请提及它。 – 2014-10-10 09:18:39

+0

请看看检查员。然后你会看到该部分不会缩放到100%的高度。如果你看看桌子,你可以看到右侧的黑色区域,这不是100%的高度。这是部分 – 2014-10-10 09:21:32

回答

0

使用以下CSS。 (我已删除的表颜色,所以你可以看到部分的大小)

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}