Div的百分比高度未按预期工作

Question

我想出了一个非常奇怪的行为。我创建了3个div，其高度以百分比表示。当我在他们自己的页面上测试它们时，表现如预期，但当我将它们包含在另一个容器中时，它们会失去它们的高度。

我认为这是因为在正常页面中，身高是身体的百分比，而在容器上是父div的百分比，但我可以准确地说出要做什么。

HTML

<div id="mywrapper">
    <div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed nisi eget ligula egestas interdum vitae ornare metus. Quisque vitae sapien facilisis, sodales nibh in</p></div>
    <div class="box"><p>Maecenas placerat libero at lorem pretium, sed condimentum diam condimentum. In eu scelerisque tellus. Cras sollicitudin cursus arcu vitae lacinia. Fusce pellentesque maximus pulvinar. Duis placerat varius augue, at sagittis nisi bibendum ve</p></div>
    <div class="box"><p>urna viverra et.</p></div>
</div>

CSS

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#mywrapper {
    background-color: #eee;
    min-height: 100%;
    height:auto !important;
    height:100%;            
    overflow: hidden !important; 
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
}

.box {
    z-index:10;         
    position:relative;
    background: rgba(0,0,0,1);
    height:45%;
    width:30%;
    margin-right: 2%;
    margin-top: 2%;
    float:left;
    display: inline-block;
}

.box p {
    color:#fff;
}

正常页面

内部容器

Answer 1

他们的高度正在变得相对于容器。这就是为什么他们不像以前那样行事。

Answer 2

我考虑使用display：table＆amp; display：分别为父级和子级的表格单元格。这样，所有3的高度将由最高的单元确定。

#mywrapper {
display: table;
table-layout: fixed;
width: 100%;
}

.box {
display: table-cell;
vertical-align: top;
width: 33.33%;
background: black;
}

要给容器一个固定的高度，只需给父（#mywrapper）一个高度。显示：table-cell的直接子节点（.box）将采用显示的父节点的高度：table。