Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side.
To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel.
Although I have implemented side navigation bars like this countless times before, I am encountering some odd height-related issues this time around. Here is a snippet of the essential code:
Note: The following excerpt represents just the wrapping div as the entirety of the side navigation code spans 140 lines.
Structured HTML for Side Navigation:
#admin-side-menu {
position: absolute;
width: 250px;
left: 0;
top: 3.5rem;
bottom: 0;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
height: 100%;
z-index: 100;
overflow-y: auto;
}<div id="admin-side-menu">
<aside class="menu">
</aside>
<div>The issue arises when the browser window is not maximized. In such cases where scrolling is required to view all content, the height of the navigation bar fails to extend all the way to the bottom. Despite attempting both "height: 100%" and "height: 100vh;", the problem persists. Any suggestions or solutions would be greatly appreciated!