html - ネストされた min-height が機能しない

Question

可変サイズのコンテンツを含むスクロールバーを含む、固定サイズの絶対配置領域があります。

ここで、少なくとも領域と同じ大きさで、コンテンツに合わせて拡張する 2 つの div でコンテンツをラップする必要があります。

<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. min-height が機能するには、絶対位置に配置するか、コンテンツの高さに依存しないブロックの高さを含める必要がありますCSS2(10.7)

2. 自動サイズ調整が必要なので、絶対に配置すること#innerもできません。#outerこれは、包含ブロックに高さが指定されている必要があることを意味します。

3. したがって#outer、 のブロックを含むことはできません#inner。これは私を残します#area。

4. CSS2(10.1)によると#inner、これは要素が絶対に配置されている場合にのみ可能であり、これは私の目的と矛盾します。

Answer 1

#inner#outerパーセンテージの高さを使用すると、正確な%orとして指定されていない親の高さに基づいていることを意味し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

私は質問を正しく理解しているかどうか確信が持てません。

内側を拡張して外側を埋めると仮定します。前述のように、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 3

に変更min-height: 100%;するheight: 100%;と動作します。

Answer 4

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