邊欄填充整個頁面的高度

這可能是一個常見問題，但我在網絡上發現的所有答案都無法正常工作。邊欄填充整個頁面的高度

我想爲我的網頁創建一個側欄，它填充了網頁的整個高度。然後，當您滾動側邊欄內容時，應該沿着網站內容的其餘部分移動。

我試過這個方法：

HTML：

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content-area"></div> 
</div>

CSS：

body { 
    margin: 0; 
} 

#wrapper { 
    width: 100%; 
} 

#sidebar { 
    width: 280px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

#content-area { 
    width: 900px; 
    margin-left: 280px; 
}

..和：

HTML：

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content-area"></div> 
</div>

CSS：

body { 
    height: auto; 
    min-height: 100%; 
    margin: 0; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
} 

#sidebar { 
    width: 280px; 
    height: 100%; 
    float: left; 
} 

#content-area { 
    width: 900px; 
    height: 100%; 
    float: left; 
}

第一個正常工作，直到內容擴展：http://jsfiddle.net/B3bCb/1/ 如果出現這種情況，則邊欄根據瀏覽器窗口的高度停止。

第二個沒工作都：http://jsfiddle.net/B3bCb/2/

我自己也嘗試了仿列的方法，但我需要有一個CSS陰影（其中模糊，傳播和顏色，可以動態地改變在網站上）在我的側邊欄上，我無法在虛擬列方法（虛擬列僅僅是一個圖像）中正確執行。

那麼無論我擁有多少內容，我如何讓自己的側邊欄高度達到100％？

來源

2014-01-21 TheYaXxE

將側邊欄位置固定爲「固定」，並不重要。我不知道，如果我解決你的問題，但希望它幫助;）

下面的代碼：

#sidebar { 
    width: 280px; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    background: blue; }

這裏的fiddle

來源

2014-01-21 10:48:06 ManelPNavarro

是否優先使用內容的餘量並調整它？ –

我知道，即使有很多內容，您也希望側欄始終可見，所以當您滾動時，您希望在側邊欄中擁有相同的信息（社交網絡，最新消息等），所以我preffer來解決它。 – ManelPNavarro

一個很好的答案。但是我忘了說邊欄內容應該與頁面的其餘內容一起移動。因爲我的側邊欄內容也會很長，如果我使用「固定」，只能看到其中的一部分內容。 – TheYaXxE

你有一對夫婦的選擇，但其要旨在於，用CSS position做。

原因position: absolute;不起作用是因爲它需要一些調整才能工作。您需要禁用滾動HTML，正文和包裝類，並啓用滾動內容區域。

html, body, wrapper { 
    overflow: hidden; 
} 

.content-area { 
    overflow: auto; 
}

你可以看到an example of this here。這是我製作的響應式側邊欄佈局。

另一種選擇是在側欄上使用position: fixed;，正如其他人所指出的那樣。

來源

2014-01-21 11:18:46 Mohamad

以下css可以是另一個替代這個

#sidebar { 
    width: 280px; 
    position: fixed; 
    top: 0; 
    height:100%; 
    background: blue; 
} 


#content-area { 
    position:relative; 
    left: 280px; // width of your side box. 
}

來源

2014-01-21 11:23:28

檢查這個小提琴http://jsfiddle.net/dJ654/2/

我已經改變了一些風格

#sidebar { 
    width: 10%; 
    height: 100%; 
    position:fixed; 
    right:0px; 
    top:0px; 
    background-color:gray;

}

#content-area { 
    width: 90%; 
    height: 100%; 
    float: left; 
    background-color:green;

}

來源

2014-01-21 11:27:50

邊欄填充整個頁面的高度

回答

相關問題