html - 嵌套的最小高度不起作用

Question

我有一个固定大小的绝对定位区域，滚动条包含可变大小的内容。

现在我需要将内容包装在两个 div 中，这些 div 至少与 area 一样大，但可以扩展以适应内容。

<div id="area">
    <div id="outer">
        <div id="inner">
            <div id="content">content</div>
        </div>
    </div>
</div>

要求：

1. 它们需要扩展，因此它们的高度必须设置为自动。
2. 为了填充容器，它们的最小尺寸必须为 100%

因此，我尝试了以下 CSS（JsFiddle中的完整示例）：

#area {
    /* defined outside */
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: scroll;
}

#outer, #inner {
    min-width: 100%;
    min-height: 100%;
}

它确实有效，#outer但对#inner. 我该如何解决？

更新 如果有帮助，我只对 Chrome 感兴趣。

另外，我可以接受，如果指向一些权威来源并进行解释，这可能是不可能的。

更新 2

因此，我分析了 CSS 规范并得出无法满足我的要求的结论：

1. 要使最小高度起作用，它必须绝对定位，或者它包含的块高度不能依赖于内容高度CSS2(10.7)

2. 我需要自动调整大小，因此既#inner不能也#outer不能绝对定位。这意味着包含块必须具有指定的高度。

3. 因此#outer不能包含#inner. 这给我留下了#area.

4. 根据CSS2(10.1)，只有#inner当元素绝对定位时才有可能，这与我的目标冲突。

Answer 1

#inner使用百分比高度意味着它基于其父级的高度，#outer未指定为精确%或px：

#area {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 20px;
    box-sizing: border-box;
}

#outer,#inner {
    min-width: 100%;
    min-height: 100%;
}

#outer {
    height:100%;
    overflow: auto;
}

这里提供的 jsFiddle，它以颜色显示#inner为#outer.

我也采取了一些自由。我将您的#areaCSS 设置为更合适的全高/全宽设置，并且我制作了您的滚动组件#outer而不是#area，因为#inner将是溢出它的内容。

Answer 2

你的最小高度至少应该基于px我%解决问题的方法。只用一个合理的pixel-height

这样，内部总是和外部一样大。

Answer 3

我不确定我是否正确理解了这个问题，应该扩展内部或内容？

假设您希望内部扩展以填充外部。如前所述，您还需要 100% 的高度，以及内部的绝对位置

然后取决于应该在内部或内容上滚动的内容

#outer {
background: red;
position: static;
min-width: 100%;
min-height: 100%;
}
#inner {
background: blue;
position: absolute;
min-width: 100%;
min-height: 100%;
height:100%;
overflow:auto;
}
#content {
height: 200px;
background-color:yellow;
overflow:auto;
}

此处的示例 - 带有滚动的内容

Answer 4

如果你改变min-height: 100%;它height: 100%;会工作。

Answer 5

#outer, #inner {
    height:100%;
    min-width: 100%;
}