如何创建固定高度的第一列布局？答案

【问题标题】：How to create fixed height 1st column layout?如何创建固定高度的第一列布局？
【发布时间】：2012-11-09 16:02:23
【问题描述】：

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

【问题讨论】：

标签： html css layout height fixed

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

固定位置是您实现这一目标的方式。看看这里：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;
}

【讨论】：

【解决方案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 File

【讨论】：