html - 固定高さの1列目のレイアウトを作成するにはどうすればよいですか？

Question

固定高さの1列目のレイアウトを作成するにはどうすればよいですか？kevinrose.comのブログを見て、シンプルでクリーンなレイアウトが気に入りました。そのレイアウトを使用したかったので、作成しようとしましたが、この固定の高さに固執しました。ヘッダーのような固定バーを簡単に設定できますが、列、私はそれを行う方法を知りません例：

#sidebar
{
    background-color: red;
    height: 700px;
    width: 100px;
    float: left;
}
#article
{
    background-color: blue;
    height: 400px;
    width: 200px;
    float: left;            
}
#like
{
    background-color: green;
    height: 100px;
    width: 200px;
    position: fixed;
    float: left;   

    z-index:-5;
}

Answer 1

固定位置は、それを達成する方法です。こちらをご覧ください：http：//jsfiddle.net/wpHMA/

.wrap {
 width:100%;
 height:100%;
 overflow:auto;
 position:relative;
}
.sidebar {
 background:#333;
 color:#fff;
 width:25%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
}
.content {
 width:75%;
 float:right;
}

Answer 2

与えられた例「kevinrose.com」によると、左パネルは固定位置構造です。次のcss/htmlコード構造を使用できます

CSS

.leftPan{
    width:27%;
    background-color:#CCC;
    position:fixed;
    left:0;
    min-height:100%;
}
.rightPan{
    margin-left:27%;
    height:1000px;
    background-color:#999;
}

HTML

<div class="leftPan">
Left Panel
</div>
<div class="rightPan">
Right Panel
</div>

ここにjsFiddleファイルがあります