0

固定高さのラッパーに配置され、3 つの内部コンテナーを含むレイアウトに取り組んでいます。

最初のコンテナー (ヘッダー) は、ラッパー内で一番上に配置する必要があり、その高さは柔軟です。

2 番目のコンテナー ( content ) も高さが柔軟で、使用可能なスペースが十分でない場合はオーバーフローする必要があります ( overflow-y: auto)。

3 番目のコンテナー ( footer ) も高さが不明であり、いつでもラッパーの下部に配置する必要があります。

<div id="wrapper">
    <div id="header">
        <span>
            some unknown content that is placed at the top of the wrapper
        </span>
    </div>
    <div id="content">
        <span>
            some more unknown content and within here we want
            to enable vertical scrolling if necessary
        </span>
    </div>
    <div id="footer">
        <span>
            again unknown content that should be placed at the bottom of
            the wrapper at any time
        </span>
    </div>
</div>

これまでに除外したオプション：

  1. 相対配置ラッパー内のフッターの絶対配置: フッターの高さが分からないため、この場合は機能しません。
  2. flexbox モデル: IE8+ をサポートする必要があるため不可
  3. table : コンテンツ行はオーバーフローしません。テーブル全体がオーバーフローし、フッターがラッパーの外側に配置されます。
  4. コンテンツ td 要素の位置が相対に設定され、位置が絶対に設定された div 要素 (実際のコンテンツを含む) を含むテーブル: ほとんどのブラウザーでオーバーフローの問題が修正されているようですが、たとえば IE9 ではコンテンツ div (高さが 100 に設定されている) %) 高さが 0 になる

ここで機能する Javascript を使用しない他のオプションはありますか?

4

1 に答える 1

1

しばらく時間がかかりましたが、これで終わりだと思います。回答を別の質問に適応させました。.innerdiv には必要ですが、そのheight:100%中のものは必要に応じて変更できる必要があります。

http://jsfiddle.net/Z4K7J/2/

.left {
    border:1px solid orange;
    width:200px;
    height:300px;
    display:table;
}

.top {
    display:table-row;
}

.middle {
    display:table-row;
    height:100%;
}

.middle .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}
于 2013-11-08T14:27:34.703 に答える