如何創建固定高度的第一列布局？

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

來源

2012-11-21 user1357167

使用位置：固定在側邊欄，並使用保證金

固定

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

來源

2012-11-21 11:54:04 sphair

感謝你的幫助，不敢相信它的簡單 – user1357167

如果答案是正確的，將其設置爲已答覆。 – sphair

的位置是你如何做到這一點偏移休息。看看這裏：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; 
}

來源

2012-11-21 11:58:29

根據你給出的例子「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

來源

2012-11-21 12:03:37

如何創建固定高度的第一列布局？

回答

相關問題