Scrollable sidebar with full height
Replace:
/* Scrollable sidebar. */
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
With:
/* Scrollable sidebar. */
.sidebar {
height: 85%;
position: relative;
overflow-y: scroll;
}
The problem is:
You adjusted the sidebar height
to 100% and the position is relative
.
See it Live.
UPDATE:
add this line to your css file.
.nav-pills li:last-child{
margin-bottom:80px;
}
See Update Here.
andrekupka
Updated on June 26, 2022Comments
-
andrekupka almost 2 years
I am currently writing on an Angular application that has a top fixed bootstrap navbar and a sidebar container that consists of a sidebar header and a scrollable sidebar list that displays some content.
Therefor I use the following CSS classes:
.main-wrapper { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; padding-top: 50px; } .sidebar-container { height: 100%; position: fixed; padding: 0px; margin-top: -50px; padding-top: 50px; border-right: 1px solid #ddd; } .sidebar-header { position: relative; padding: 15px; border-bottom: 1px solid #ddd; } .sidebar { height: 100%; position: relative; overflow-y: scroll; }
And the following html code:
<div class="main-wrapper"> <div class="sidebar-container col-xs-3"> <div class="sidebar-header"> ... </div> <div class="sidebar"> ... </div> </div> <div class="main-view col-xs-9 pull-right"> ... </div> </div>
The following jsfiddle is a minimal working example:
https://jsfiddle.net/j1tuw3vj/8/
My problem is, that the sidebar is moved beyond the bottom of the page so the last element of the list is invisible. I cannot move it up by setting a negative margin and a padding to the sidebar, because I don't know the actual height of the sidebar header (its height can change in different views).
-
andrekupka over 8 yearsThe problem is, that I want the sidebar to use the rest of the available height. With a value less the 100% there is either empty space below the sidebar or if the header grows to much, it is pushed below the bottom of the window.