高さ100％のHTMLレイアウト

Question

特定の問題が発生しました。基本的には、div内にdivなどのセルがあるdivが必要です。また、100％の高さと幅（ページ全体をカバーする）とその子孫の高さを順番に計算するために、最も外側のdivが必要ですその内容の高さ彼らよりも大きいものをdiv要素（彼らはスクロールバーが表示されているはずです）

私は、テストページとフィドルを用意しました：

http://jsfiddle.net/S2YSh/6/

これまでのところ、唯一のGoogle Chromeは私としてそれを示しています計画、IEは高さ100％のパディングとマージンを計算せず、Firefoxはコンテンツ（スクロールバーなし）に伸びます

誰もが（私は同じHTML構造を持つことができます）私を助けることができればそれは高く評価されます。

Answer 1

あなたはこのようにそれを行うことができます。

.right{ 
    float:right; 
    width:200px; 
    height:100%; 
    background:red; 
} 
.left{ 
    overflow:hidden; 
    background:green; 
    height:100%; 
} 
.right, .left{ 
padding:20px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 

html, body{ 
    height:100%; 
} 

チェックこのhttp://jsfiddle.net/S2YSh/9/

Answer 2

はこれを試してください：あなたはパディングやマージンのいずれかのタイプを追加する場合

<div style="height:100%;width:100%;position:absolute;top:0;left:0;"> 
    <table>...</table> 
</div>