Take a look at this code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#sidebar {
display: inline-block;
vertical-align: top;
width: 18%;
background-color : red;
}
#sidebar-content {
display: inline-block;
vertical-align: top;
width: 100%;
overflow-y: auto;
}
#content {
position : relative;
z-index : 10;
display: inline-block;
vertical-align: top;
width: 82%;
overflow: auto;
background-color : green
}
</style>
</head>
<body>
<div id="container" class="h-100">
<div id="sidebar" class="h-100" >
<div class="container" id="sidebar-content-header">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Some long text which should just appear on top of content area</a>
</div>
</div>
</div>
<div class="container h-100" id="sidebar-content">
<ul>
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
...
<li>Sidebar list 1</li>
<li>Sidebar list 1</li>
</ul>
</div>
</div><!--
--><div id="content" class="h-100">
<div id="main-content">
Lorem ipsum dolor sit amet... [truncated for brevity]
</div>
</div>
</body>
</html>
Here are the steps I have implemented:
- Moved drop-down button into its own section within sidebar for better control.
- Added
h-100 class to container, sidebar, and content to make them full height of viewport.
- Set overflow-y: auto for sidebar to show vertical scroll bar only when necessary, similar to content section.
Extra Tip: Consider adding padding classes like p-1/p-2/p-3/p-4 to sidebar and content for better appearance.