css - 最小高度 100% 内部 div

Question

我想要两个嵌套的 div:

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

两者都应该至少是窗口的高度。所以当然，我将 html 和 body 的高度设置为 100%，这样外部 div 可以有一个 min-height:100%，并且因为 html 和 body 元素的高度是已知的，这是明确定义的。

但是，min-height 并没有说明外部 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 拉伸(stretch)？

在我的实际应用程序中，外部 div 是透明的，所以我不太在意。但是，我有点好奇，修复或解释我想要的是不可能的会很好!

Answer 1

其实我很好奇如何解决这个“问题”。如果您将 display: table 应用到外部 div 并将 display: table-cell 应用到内部 div，它就会按照您想要的方式工作。

<强>1。 Fiddle: 最小高度 100% 没有任何内容 <强> http://jsfiddle.net/5ML3W/1/

<强>2。 Fiddle: 如果内容添加到内部 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;
}