具有属性显示的div的高度：与父div相同的表

Question

我正在尝试使用类名＆＃34;数据＆＃34;与父div相同的高度（＆＃34; strip1＆＃34;），但遗憾的是它更短。它只发生在Chrome上，但不适用于Firefox。我该怎么办？

<div class="container">
<div class="strip1">
    <div class="data">
        <div class="data_element dataA">A</div>
        <div class="data_element dataB">B</div>
        <div class="data_element dataC">C</div>
    </div>
</div>
<div class="strip2"></div>
<div class="strip3"></div>

body{
   padding:0;
}

.strip2 {
    background-color: #FFFFFF;
    height: 65%;
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    text-align: center;
}
.strip3 {
    background-color: green;
    height: 10%;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;

 }

.strip1 {
    background-color: red;
    height: 25%;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;

}
.data {
    background-color: #00337C;
    display: table;
    height: 100%;
    width: 100%;

}
.data_element {
    color: #FFFFFF;
    font-size: 30px; 
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 30px;
}

.data_element.dataA {    
    width: 20%;    
}
.data_element.dataB {
    width: 50%;
}
.data_element.dataC {
    font-size: 20px;
}

以下是示例live jsFiddle example

Answer 1

将.strip1显示更改为display: table;。您可能还想将.data更改为display: table-row;。将.data上的diaplay设置为table-row将允许您删除高度和宽度声明。

已编辑：已添加代码段

body{
    padding:0;
}

.strip2 {
    background-color: #FFFFFF;
    height: 65%;
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    text-align: center;
}

.strip3 {
    background-color: green;
    height: 10%;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
}

.strip1 {
    background-color: red;
    height: 25%;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    display:table;
}

.data {
    background-color: #00337C;
    display: table-row;
    height: 100%; /* you can remove height declaration if set to display:table-row */
    width: 100%; /* you can remove width declaration if set to display:table-row */     
}

.data_element {
   	color: #FFFFFF;
    font-size: 30px; 
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 30px;
}

.data_element.dataA {    
    width: 20%;    
}

.data_element.dataB {
    width: 50%;
}

.data_element.dataC {
    font-size: 20px;
}

<div class="container">
    <div class="strip1">
        <div class="data">
            <div class="data_element dataA">A</div>
            <div class="data_element dataB">B</div>
            <div class="data_element dataC">C</div>
        </div>
    </div>
    <div class="strip2"></div>
    <div class="strip3"></div>
</div>

Answer 2

试试这个：

.data {
    background-color: #00337C;
    display: table;
    position:absolute;
    top:0;bottom:0;
    width: 100%;
}