Currently, I am working on an Angular application that features a fixed bootstrap navbar at the top and a sidebar container with a header and a scrollable list of content.
To achieve this layout, I am using specific 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;
}
Here is the corresponding HTML code snippet:
<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>
You can access a minimal working example in the following jsFiddle link:
https://jsfiddle.net/j1tuw3vj/8/
The issue I'm facing is that the sidebar extends beyond the bottom of the page, causing the last element in the list to be hidden. Adjusting the margin or padding of the sidebar is challenging because the height of the sidebar header may vary in different views.