2

ヘッダー コンテナー レイアウトを作成しようとしています。ヘッダーの高さは可変であり、コンテナーは常に残りのスペース (幅、高さ) を埋める必要があります。

IE (9,10) および最新の Operaでは、レイアウト テーブルの高さが間違って計算され、スクロール バーが表示されます。残りのブラウザー (Safari、Chrome、Firefox) は正しく計算します。

<div class="header-container-layout">
<table border="0" cellspacing="0" cellpadding="0">
    <tr class="layout-hdr">
        <td style="background:#aaa">
            asdasdas asdasd 
        </td>
    </tr>
    <tr class="layout-content" >
        <td style="height:100%;">
            <div class="layout-content-inner" style="background:#ccc;">


            </div>
        </td>
    </tr>
</table>
</div>


.header-container-layout{
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.layout-content-inner{
    height:100%;
    position:relative;
    overflow:hidden;
}
table{
    width:100%;
    height:100%;
}

ここで状況を見ることができます：http://jsfiddle.net/95und/9/

javascript なしでこれに対する解決策はありますか?

ありがとう！

編集: 私の問題は、スクロール バーの外観とは関係ありません。overflow:hidden で回避できます。問題は、コンテンツをコンテナの底に絶対に配置したいということです。

4

1 に答える 1

1

に追加overflow:hiddenすると、.header-container-layoutOpera でスクロールバーが消えます。

.header-container-layout{
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    ***overflow:hidden;***
}

現在、IE で実際にテストすることは非常に簡単ではありませんが、おそらく同じように動作すると思われます。

もちろん、これに関する唯一の問題は、コンテンツが特に長い場合、途切れる可能性があることです. あなたの計画が何であるかによって異なります。

http://jsfiddle.net/yochannah/95und/10/

于 2013-10-27T12:26:51.730 に答える