Bootstrap邊欄不滾動100％高度

我目前在屏幕左側有一個Bootstrap邊欄。 height設置爲100%。但是當內容超出屏幕底部時，它不可滾動。Bootstrap邊欄不滾動100％高度

我看到this Stack Overflow這個問題與我的問題非常相似。其中一條評論提到，這可能是由於我的身高設置爲100％。

我試圖將我的高度設置爲100px，就像測試內容是否可以滾動一樣，並且工作正常。

所以我的問題是，有沒有辦法讓我的邊欄中的內容可滾動，並保持高度在100%，而不必設置特定的像素值？

編輯：

下面是我對當前#sidebar-wrapper CSS。

#sidebar-wrapper { 
    overflow-y: scroll; 
    z-index: 1000; 
    position: fixed; 
    left: 175px; 
    width: 175px; 
    height: 100%; 
    margin-left: -175px; 
    overflow-y: auto; 
    background: #222222; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}

來源

2017-10-08 Charlie Fish

更新：

通過特定網站上的代碼去後。固定位置的側邊欄需要CSS屬性top:52px，它將頂部的側邊欄偏移以容納高度爲52px和bottom:0px的導航欄，該導航欄被添加以確保側欄延伸到瀏覽器窗口的底部。

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 175px; 
    top: 52px; 
    bottom: 0px; 
    margin-left: -175px; 
    overflow-y: auto; 
    background: #222222; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}

老答案：

下面是bootsnipp.com/一些示例代碼和代碼的簡單的工作片段。參考下面的JSFiddle。

因此，如果代碼被以這種形式結構，則引導將採取邊欄內部滾動的照顧，如果你需要隨時添加滾動然後CSS屬性overflow-y:scroll添加到ID #sidebar-wrapper

下面的CSS是我在說什麼。

#sidebar-wrapper { 
    margin-left: -250px; 
    left: 250px; 
    width: 250px; 
    background: #000; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    transition: all 0.4s ease 0s; 
}

JSFiddle Demo

來源

2017-10-08 06:45:09

我剛剛更新了我的CSS問題。你提供的鏈接不是我的問題。側欄上有4個錨點。想象一下，側邊欄中的內容更多。所以內容不適合邊欄的高度。我希望側欄可以滾動，以便用戶可以滾動查看所有內容。 –

@CharlieFish我給出的jsfiddle鏈接有很多內容，所以當內容大於側邊欄時添加了滾動條......請問您在jsfiddle中的代碼的確切問題！ –

看起來像你提供的鏈接，當我編輯它。讓我再試一試我的代碼，試圖進一步縮小問題的範圍。 –

Bootstrap邊欄不滾動100％高度

回答

相關問題