最小高度100％内部div

Question

我想要两个嵌套的div：

<div class="outer">
    <div class="inner">A div in a div!!!</div>
</div>

两者都应该至少是窗口的高度。所以当然，我将html和body的高度设置为100％，这样外部div可以有一个最小高度：100％，并且因为html和body元素的高度是已知的，所以这个定义很明确。 / p>

但是，最小高度并没有说明外部div的实际高度。因此，当内部div被“计算”时，它没有被定义。内部div可能会迫使外部div变大，或者内部div可能不如外部div高。

据我搜索，我找到了2个解决方案，每个解决方案在上述情况下都会中断：

http://jsfiddle.net/5ML3W/

.outer {
    min-height: 100%;
    height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

http://jsfiddle.net/bkjHa/1/

.outer {
    min-height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

基本上差别在于外部div的高度属性。

如果内部div变得更大，我如何强制我的内部div至少为窗口大小的100％而外部div要拉伸？

在我的真实世界应用程序中，外部div是透明的，所以我不会真正关心。但是，我有点好奇，修复或解释我想要的东西不可能会很好！

Answer 1

我真的很好奇如何解决这个“问题”。如果将display: table应用于外部div并且display: table-cell应用于内部div，它将以您希望的方式工作。

<强> 1。小提琴：最低身高100％没有任何内容 的 http://jsfiddle.net/5ML3W/1/

<强> 2。小提琴：如果将内容添加到内部div，则两个div都会展开 的 http://jsfiddle.net/TVY6K/

这是CSS：

html, body{
    height:100%;
    margin: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
 }

.outer {
    height: 100%;
    width: 500px;
    background: green;
    display: table;
    padding: 0 50px;

}
.inner {
    display: table-cell;
    width: 250px;
    background: red;
}