HTML + CSS：すべての利用可能なビューポートを取得

Question

ヘッダー付きの液体HTMLレイアウトを作成しようとしています（利用可能な幅と高さ130ピクセルをすべて取る）、2列（​​1：300px幅すべて可能な高さ、2： 2はそれらの間に300pxと15-20pxのマージンをとった）。

気圧私はこれを持っている：

HTML：

<div class="wrapper"> 
    <div class="header"> 
     <!-- .... --> 
    </div> 
    <div class="content"> 
     <div class="left-column"> 
     <!-- ... --> 
     </div> 
     <div class="right-column"> 
     <!-- ... --> 
     </div> 
    </div> 
</div> 

CSS：

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    min-width: 1000px; 
    min-height: 500px; 
} 

body { 
    font: 12px sans-serif; 
    background-color: #fff; 
    color: #000; 
} 

.wrapper { 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 

.header { 
    padding: 0 30px; 
    height: 100px; 
    left: 0px; 
    right: 0px; 
    position: absolute; 
    border: 1px solid black; 
    border-top: none; 
} 

.content { 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    margin: 10px 20px; 
    border: 1px solid black; 
} 

.left-column { 
    float: left; 
    width: 300px; 
    border: 1px solid black; 
} 

.right-column { 
    margin-left: 315px; 
    border: 1px solid black; 
} 

質問です：任意のより良い解決策があるのですか？

ありがとうございました。

Answer 1

私はあなたのHTMLをとり、あなたのためにこのフィドルを作成しました：http://jsfiddle.net/RdQJY/1/。私はあなたのCSSを使用しませんでした - 私はちょうどあなたがそれを使用している方法で使用されるポジショニングが好きではないので、最初からそれを書くことに決めました（それについては申し訳ありません）。 lorem ipsumテキストはプレースホルダとして存在します。削除すると、divがウィンドウ全体を占めることがわかります。お役に立てれば！

P .:同じ高さの列を持つ私の方法の唯一の欠点は、それらに下の境界線を適用する簡単な方法がないことです。