Question

我做了一个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％高度等解决方案，但似乎没有任何效果。我能做什么？我不能使用固定的高度。

Answer 1

使用以下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}

表100％的父母身高？

1 个答案: