Css 最小高度100%内分区

我想要两个嵌套的div：

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

本质上，差异是外部div的height属性

如果内部div变大，如何强制内部div至少为窗口大小的100%，并强制外部div拉伸

---

在我的实际应用程序中，外部div是透明的，所以我并不在乎。然而，我有点好奇，一个修复或解释，我想要的是不可能的，将是很好的

实际上，我对如何解决这个“问题”很好奇。如果将

display:table

应用于外部div，并将

display:table cell

应用于内部div，则其工作方式与您希望的相同

1。小提琴：最小高度100%，无任何内容

2。Fiddle:如果内容添加到内部div，则两个div都将展开

下面是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;
}

---

哈哈，我假设表格有一个简单的要求，所有的单元格都包括在内。但是，我确实想知道渲染程序是否需要某种反馈，甚至反馈循环，才能将单元格设置为正确的大小，将表设置为正确的大小。我的意思是，表格的大小必须至少是单元格的大小，单元格必须是表格的100%。这是一种循环依赖关系，对我们人类来说很容易理解，但对装配模拟来说可能更难。

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

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;
}