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＆display：table-cell。 这样，所有三个单元的高度将由最高的单元格确定。

#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的父代的高度。