div上的側邊欄高度100％不延伸到頁面底部

Question

我在SO上已經看到了幾個與此問題類似的問題/答案，但是我檢查過的所有答案都沒有幫助我。

我正在嘗試讓“邊欄”從小於頁面頂部的10px一直延伸到底部。

但是（當使用height：100％時），“ Side-Bar”僅到達加載的瀏覽器窗口的底部，如果有內容超出您向下滾動到的瀏覽器窗口，則“ Side-Bar”將提前結束。

基本上，它的高度只是瀏覽器窗口的100％，我希望它是整個頁面內容的100％。

我創建了一個JSFiddle來顯示我的問題：

http://jsfiddle.net/qaEzz/1/

我的CSS：

#sidebar {
  position:absolute;
  right:8px;
  width:200px;
  height:100%;
  overflow:hidden;
  background-color: yellow;
}

Answer 1

我把<div id="sidebar"></div>

進入<div id="content">

並添加到css中

#topbar {
    width:100%; <--this 
    height:20px;
    background-color: red;
}

和這個

#sidebar {
    position:absolute;
    right:16px; <--! extended to 16 px
    width:200px;
    height:100%;
    overflow:hidden;
    margin-top:-10px; <--!
    background-color: yellow;
}


#content {
    position: absolute;<--! and remove the marging: 10px just add a <br> in the html
    width:100%
}

這是工作中的小提琴

Answer 2

如果您改變position:absolute; position:fixed; ，那么它將堅持在右側的位置。

對於可能比瀏覽器長度本身長的邊欄，請使用float屬性代替position屬性，而不是position屬性。

http://jsfiddle.net/wK2Yh/

#sidebar {
    float:right;
    right:8px;
    width:200px;
    height:100%;
    overflow:hidden;
    background-color: yellow;
}