html - 如何创建固定高度的第一列布局？

Question

如何创建固定高度的第一列布局？我看到了一个 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

使用位置：固定在侧边栏上，并使用边距偏移其余部分

#sidebar
{
    background-color: red;
    width: 100px;
    position: fixed;
}
#article
{
    background-color: blue;
    width: 200px;
    margin-left: 100px;
}

Answer 3

根据您给定的示例“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 文件