html - 高さ 100% の 2 つのフローティング div を並べて作成する

Question

高さ 100% のサイド バイ サイド div を作成しようとしています。最初の div を機能させることができましたが、2 番目の div は問題の原因であり、過去 3 時間これを実行しようとしていました。

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
}

/*leftColumn */
.leftColumn {
    float:left;
    width:250px;
    height:100%;
    background:#fafafa;
    border-left:solid 1px #dedede;
    position:fixed;
    top:0px;
}

/* Content */
.mainContent {
    float: left;
    width: 650px;
    height:100%;
    background:#fff;
    margin-left:252px;
    padding-bottom: 50px;
}

http://i49.tinypic.com/ycef7.jpgのように見えるはずの例

現時点でどのように見えるか（修正方法がわからないすべてを試しました） http://i49.tinypic.com/2ryk5eo.png

Answer 1

左にフロートされた両方の内部 div に明示的な高さを与えるのではなく、overflow:hidden;親 div で使用する必要があります。

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
    overflow:hidden;
}

Answer 2

追加

html, body {
    height: 100%;
}

（http://jsfiddle.net/zYWjJ/2/）