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

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

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

Answer 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;
}

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 File

如何创建固定高度的第1列布局？

3 个答案: