Question

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

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

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

要求：

他们需要展开，因此他们的身高必须设置为自动。
为了填充容器，其最小尺寸必须为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规范并得出结论，我的要求无法满足：

要使最小高度工作，它必须绝对定位，否则它必须不包含块高内容高度CSS2(10.7)
我需要自动调整大小，因此#inner和#outer都不能绝对定位。这意味着包含块必须具有指定的高度。
因此#outer不能包含#inner的阻止。这让我留下#area。
根据CSS2(10.1)，当元素绝对位于哪个时，#inner才有可能与我的目标相冲突。

Answer 1

如果您将min-height: 100%;更改为height: 100%;，则会有效。

Answer 2

使用百分比高度的

#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 provided here，其颜色显示#inner获得#outer的完整高度。

我也有一些自由。我将您的#area CSS设置为更合适的完整高度/宽度设置，我创建了滚动组件#outer而不是#area，因为#inner将是溢出它。

Answer 3

你的最小身高应该基于px而不是%至少我是如何解决问题的。只需使用合理的pixel-height

这样，内心永远和外在一样大。

Answer 4

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

假设您希望内部扩展以填充外部。如上所述，您还需要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;
}

example here - with content, which scrolls

Answer 5

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

嵌套的最小高度不起作用

5 个答案: