固定側邊欄和流體含量區域

enter image description here 固定側邊欄和流體含量區域

我正試圖創建一個像這樣的圖像的頁面。但是我被困在了側邊欄裏。我試圖讓它左右浮動。但一些棘手的問題！試圖讓側邊欄絕對定位。但是當內容區域很大時，側邊欄背景不能跟上內容區域。

任何人都可以幫助我創建一個這樣的基本結構嗎？

這就是我用過的！

aside{ 
    width: 215px; 
    background: #f9f9f9; 
    padding:5px 0; 
    padding:5px; 
    position: absolute; 
    top: 128px; 
    bottom:0; 
    left: 0  
} 
.main .content{ 
    background:#fff; 
    padding:5px; 
    margin-left: 195px; 
    height:100%; 
}

來源

2012-10-11 user1012181

請問您可以發佈您的代碼嗎？ –

您可以在側邊欄絕對定位做到這一點，並在內容保證金：http://jsbin.com/ucihul/1/edit

的關鍵特性是：

在兩個邊欄的父元素和內容：position: relative

在邊欄上：

bottom: 0; 
left: 0; 
position: absolute; 
top: 0; 
width: 215px; /* or whatever your fixed width is */

在內容DIV：margin-left: 215px（或任何你固定的寬度）

你也可以有側邊欄和內容都進行額外的控制（他們在我的演示，但裏面內在的div我沒有對他們做任何事情）。

來源

2012-10-11 19:34:16 tuff

我們不能設置'bottom：0' 如果內容區域大於屏幕高度，邊欄不會調整它的高度！ – user1012181

[是的，會]（http://jsbin.com/ucihul/2/edit）。爲什麼你不能設置'bottom：0：'？ – tuff

如何：

HTML

<div id="sidebar">Sidebar</div> 
    <div id="content">Content</div>

CSS

#sidebar { float: left; width: 100px; background: red; } 
#content { margin-left: 100px; background: blue; }

小提琴：http://jsfiddle.net/j7dS5/1/

來源

2012-10-11 18:44:41 Fluidbyte

側欄不限於內容高度！ – user1012181

最簡單的方法是以圖形方式。製作一個與「.main」區域一樣寬的圖像，並將1px高的圖像適當設置爲您設置div的寬度。

.main{ 
    background:url(images/image.png) top center repeat-y; 
} 
aside{ 
    width: 215px; 
    padding:5px 0; 
    padding:5px; 
    position: absolute; 
    top: 128px; 
    bottom:0; 
    left: 0  
} 
.main .content{ 
    padding:5px; 
    margin-left: 195px; 
}

來源

2012-10-11 19:26:44 Matthew

固定側邊欄和流體含量區域

回答

相關問題