固定サイズの左の列と右の列の両方が100％の高さ

Question

この例のように、100％の高さの固定された左の列と右の流体を持つ2列のレイアウトを作成したいと考えています：

私は多くのバリエーションを試しましたが、私が今試したことを覚えていないので、正しく見えるようにはできません。私もLayoutGalaのようなウェブサイトを見てみましたが、どちらの例も100％の高さを持っていません。

私はすでに試したことは覚えていませんが、これは間違いなく最後の試みでした。私はこれが最後に訪問されたウェブページだったので、私はアパートブロックの4階からコンピュータのモニターを投げて逮捕されたのでこれを知っています。

MyFiddle

私はそれがフルスクリーンの流体のレイアウトに来たとき、それは完全に私を投げたことを、私の960広い中心のウェブサイトに使用されています：

body { margin:0; padding:0; } 
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; } 
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; } 


<div class="page-wrapper"> 
    <div class="left-column"></div> 
    <div class="right-columnr"> 
     sd 
    </div> 
</div> 

これは、ここでの結果です。どんな助けでも大歓迎です。

Answer 1

まず、あなたは第二に、right-columnrタイプミスを修正する必要があります100%を要素の上に置いて画面全体の高さを取る場合、その親の高さは100%でなければなりません

CSS：

html, body { 
  height: 100%; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
} 

.page-wrapper { 
    height: 100%; 
    position: relative; 
} 

.left-column { 
    position:fixed; /* <-- fixes the left panel to prevent from scrolling */ 
    top:0; 
    left:0; 
    width:235px; 
    height:100%; 
    background:#090909; 
} 

.right-column { 
    margin-left:235px; 
    background:yellow; 
    min-height:100%; /* <-- fixes the background-color issue when content grows */ 
} 

HTML：

<div class="page-wrapper"> 
    <div class="left-column"></div> 
    <div class="right-column"> 
    This is the content. 
    </div> 
</div> 

JSBin Demo

Answer 2

IF実際に列の高さを100％にしたい場合は、bodyとhtml要素に100％の高さを設定する必要があります。

これは動作します：

html {height: 100%} 
body {height: 100%} 
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */ 
.left-column {float: left; width: 235px; height: 100%} 
.right-column {overflow: hidden; height: 100%} 

編集：あなたのコードに基づいて

デモ：あなたはの高さを設定する場合：http://jsfiddle.net/YL8Eh/