1

外側の div の寸法 (幅 + 高さ) に基づいて完全に引き伸ばされる一般的なヘッダー - ボディ - フッター セクションを作成しようとしています。このアプローチの例:

CSS

    .outer
    {
        position:relative;
        width:200px; 
        height:150px;
        border:1px dotted black;
        margin:-1px;
    }
    .tbl
    {
        display:table; 
        width:100%; 
        height:100%;
    }
    .tr
    {
        display:table-row;
    }
    .td
    {
        display:table-cell; 
        margin:0 auto;
        text-align:center; 
    }
    .body-outer
    {
        position:relative;
        height:100%; 
        width:100%; 
    }
    .body-inner
    {
         position:absolute; 
         top:0; 
         right:0; 
         bottom:0; 
         left:0; 
         overflow-y:auto; 
         overflow-x:auto;
    }
    .stretch-x
    {
        width:100%;
    }
    .stretch-y
    {
        height:100%;
    }

HTML

<div class="outer">
<div class="tbl">
    <div class="tr" style="background-color:Red;">
        <p>test paragraph. This is used as placeholder<br />new line....</p>
    </div>
    <div class="tr stretch-y" style="background-color:Gray;">
        <div class="td stretch-y" style="background-color:Blue;">
            <div class="body-outer" style="background-color:Green;">
                <div class="body-inner">
                <p style=" white-space:nowrap;">test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                <p>test paragraph. This is used as placeholder<br />new line....</p>
                <p>test paragraph. This is used as placeholder</p>
                </div>
            </div>
       </div>
    </div>
    <div class="tr" style="background-color:Red;">
        <p>test paragraph. This is used as placeholder<br />new line....</p>
    </div>
</div>
</div>

FF、Chrome、Safari、Opera では、すべてが期待どおりに機能しています。しかし、IEではありません... IE10でも。問題は、IE が "body" セクションの高さをその先祖 "td" との相対として識別せず、尊重される高さを "outer" div との相対として計算することです。この問題に関するアイデアはありますか？

4

1 に答える 1

1

やっと謎が解けました... 一般的な標準に準拠するために、IE は Quirks モード (!!!!) で実行する必要があります!!!

上記の設計は、CSS テーブルの実装に基づいて、完全に柔軟なヘッダー-ボディ-フッター セクションを構成します。次の場合に使用できます。

  1. 外箱の具体的な寸法があります（パーセンテージを使用し、親コンテナの高さなどに関する既知の制約に従っても...）
  2. 外側のボックスの内側はすべて伸縮性があり、自動伸縮する必要があります

完全に機能する例 @jsfiddle: http://jsfiddle.net/92y9L/9/

see code above (↑)

楽しみ！

于 2013-09-07T11:54:54.237 に答える