How to make sticky header, footer and side bar?

Question

I have the template that currently works, but I would like to make some adjustments. The current code scrolls the entire content. I would like to have header and footer to be fixed/sticky. When user scrolls the content header and footer should be visible. The last piece is sidebar menu. This content is scrolling in the current code up and down the page. I think it would be much better if that content is fixed as well. The only area that should be scrollable it should be the main container. Here is my code example:

 /* Resize function without multiple trigger */ (function($, sr) { // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function(func, threshold, execAsap) { var timeout; return function debounced() { var obj = this, args = arguments; function delayed() { if (!execAsap) func.apply(obj, args); timeout = null; } if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; }; // smartresize jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery, 'smartresize'); var CURRENT_URL = window.location.href.split('#')[0].split('?')[0], $BODY = $('body'), $MENU_TOGGLE = $('#menu_toggle'), $SIDEBAR_MENU = $('#sidebar-menu'), $SIDEBAR_FOOTER = $('.sidebar-footer'), $LEFT_COL = $('.left_col'), $RIGHT_COL = $('.right_col'), $NAV_MENU = $('.nav_menu'), $FOOTER = $('footer'); // Sidebar function init_sidebar() { // TODO: This is some kind of easy fix, maybe we can improve this var setContentHeight = function() { // reset height $RIGHT_COL.css('min-height', $(window).height()); var bodyHeight = $BODY.outerHeight(), footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(), leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(), contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight; // normalize content contentHeight -= $NAV_MENU.height() + footerHeight; $RIGHT_COL.css('min-height', contentHeight); }; var openUpMenu = function() { $SIDEBAR_MENU.find('li').removeClass('active active-sm'); $SIDEBAR_MENU.find('li ul').slideUp(); } $SIDEBAR_MENU.find('a').on('click', function(ev) { var $li = $(this).parent(); if ($li.is('.active')) { $li.removeClass('active active-sm'); $('ul:first', $li).slideUp(function() { setContentHeight(); }); } else { // prevent closing menu if we are on child menu if (!$li.parent().is('.child_menu')) { openUpMenu(); } else { if ($BODY.is('nav-sm')) { if (!$li.parent().is('child_menu')) { openUpMenu(); } } } $li.addClass('active'); $('ul:first', $li).slideDown(function() { setContentHeight(); }); } }); // toggle small or large menu $MENU_TOGGLE.on('click', function() { if ($BODY.hasClass('nav-md')) { $SIDEBAR_MENU.find('li.active ul').hide(); $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active'); } else { $SIDEBAR_MENU.find('li.active-sm ul').show(); $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm'); } $BODY.toggleClass('nav-md nav-sm'); setContentHeight(); }); // check active menu $SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page'); $SIDEBAR_MENU.find('a').filter(function() { return this.href == CURRENT_URL; }).parent('li').addClass('current-page').parents('ul').slideDown(function() { setContentHeight(); }).parent().addClass('active'); // recompute content when resizing $(window).smartresize(function() { setContentHeight(); }); setContentHeight(); // fixed sidebar if ($.fn.mCustomScrollbar) { $('.menu_fixed').mCustomScrollbar({ autoHideScrollbar: true, theme: 'minimal', mouseWheel: { preventDefault: true } }); } } // /Sidebar $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); init_sidebar(); });

 .left_col { background: #2A3F54; } .nav-sm .container.body .col-md-3.left_col { min-height: 100%; width: 70px; padding: 0; z-index: 9999; position: absolute; } .nav-sm .container.body .col-md-3.left_col.menu_fixed {position: fixed; height: 100%;} .nav-sm .container.body .col-md-3.left_col .mCSB_container, .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox { overflow: visible; } .nav-sm .hidden-small { visibility: hidden; } .nav-sm .container.body .right_col { padding: 10px 20px; margin-left: 70px; z-index: 2;} .nav-sm .navbar.nav_title { width: 70px;} .nav-sm .navbar.nav_title a span { display: none;} .nav-sm .navbar.nav_title ai {font-size: 27px;margin: 13px 0 0 3px;} .site_title i { border: 1px solid #EAEAEA; padding: 5px 6px; border-radius: 50%;} .nav-sm .main_container .top_nav {display: block; margin-left: 70px; z-index: 2;} .nav-sm .nav.side-menu li a {text-align: center !important; font-weight: 400; font-size: 10px; padding: 10px 5px;} .nav-sm .nav.child_menu li.active, .nav-sm .nav.side-menu li.active-sm {border-right: 5px solid #1ABB9C;} .nav-sm ul.nav.child_menu ul, .nav-sm .nav.side-menu li.active-sm ul ul {position: static; width: 200px;background: none;} .nav-sm>.nav.side-menu>li.active-sm>a {color: #1ABB9C !important;} .nav-sm .nav.side-menu li a i.toggle-up {display: none !important;} .nav-sm .nav.side-menu li ai {font-size: 25px !important; text-align: center;width: 100% !important; margin-bottom: 5px;} .nav-sm ul.nav.child_menu { left: 100%; position: absolute; top: 0;width: 210px;z-index: 4000; background: #3E5367;display: none;} .nav-sm ul.nav.child_menu li {padding: 0 10px;} .nav-sm ul.nav.child_menu li a { text-align: left !important;} .menu_section h3 { padding-top: 5px;padding-bottom: 5px;padding-left: 23px;color: #fff; background-color: rgba(255, 255, 255, 0.06); text-transform: uppercase;letter-spacing: .5px; font-weight: bold;font-size: 11px; margin-bottom: 0; margin-top: 0; text-shadow: 1px 1px #000;} .menu_section>ul {margin-top: 5px;display: block;} .main_menu span.fa {float: right;text-align: center;margin-top: 5px;font-size: 10px;min-width: inherit;color: #C4CFDA;} .active a span.fa {text-align: right !important;margin-right: 4px;} .nav-sm .menu_section {margin: 0;} .nav-sm span.fa, .nav-sm .menu_section h3 {display: none;} .nav-sm li li span.fa {display: inline-block;} .nav_menu {float: left;background: #EDEDED;border-bottom: 1px solid #D9DEE4;margin-bottom: 10px;width: 100%;position: relative;} @media (min-width: 480px) { .nav_menu {position: static;} .item {display: block;} } .nav-md .container.body .col-md-3.left_col {min-height: 100%;width: 230px;padding: 0;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;z-index: 1;} .nav-md .container.body .col-md-3.left_col.menu_fixed {height: 100%;position: fixed;} body .container.body .right_col {background: #F7F7F7;} .nav-md .container.body .right_col {padding: 10px 20px 0;margin-left: 230px;} .nav_title {width: 230px;float: left;background: #2A3F54;border-radius: 0;height: 57px;padding: 0px;} @media (max-width: 991px) { .nav-md .container.body .right_col, .nav-md .container.body .top_nav {width: 100%;margin: 0;} .nav-md .container.body .col-md-3.left_col {display: none;} .nav-md .container.body .right_col {width: 100%;padding-right: 0;} .right_col {padding: 10px !important;} .item {display: block;} } .container {width: 100%;padding: 0;max-width: 100%;} .navbar-nav>li>a, .navbar-brand, .navbar-nav>li>a {color: #fff !important;} body {color: #73879C;background: #2A3F54;font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;font-size: 13px;font-weight: 400;line-height: 1.471;} .main_container .top_nav {display: block;margin-left: 230px;} .main_content {padding: 10px 20px;} h1,.h1,h2,.h2,h3,.h3 {margin-top: 10px; margin-bottom: 10px;} a {color: #5A738E;text-decoration: none;} a,a:visited,a:focus,a:active, :visited, :focus, :active, .btn:focus,.btn:active:focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn.active.focus {outline: 0;} a:hover, a:focus { text-decoration: none; } .navbar { margin-bottom: 0; } .navbar-header { background: #34495E; } .navbar-right { margin-right: 0; } .top_nav .navbar-right { margin: 13px; width: auto; float: right; } .top_nav .navbar-right li { display: inline-block; float: right; position: static; } @media (min-width: 480px) { .top_nav .navbar-right li { position: relative; } .item { display: block; } } .top_nav .dropdown-menu li { width: 100%; } .dropdown-item { width: 100%; padding: 12px 20px; } .top_nav li ai { font-size: 15px; } .navbar-static-top { position: fixed; top: 0; width: 100%; } .sidebar-header { border-bottom: 0; margin-top: 46px; } .sidebar-header:first-of-type { margin-top: 0; } .nav>li { position: relative; display: block; } .nav.side-menu>li { position: relative; display: block; cursor: pointer; } .nav.side-menu>li>a { margin-bottom: 6px; } .nav.side-menu>li>a:hover { color: #F2F5F7 !important; } .nav.side-menu>li>a:hover, .nav>li>a:focus { text-decoration: none; background: transparent; } .nav.child_menu { display: none; } .nav.child_menu li:hover, .nav.child_menu li.active { background-color: rgba(255, 255, 255, 0.06); } .nav.child_menu li { padding-left: 36px; } .nav-md ul.nav.child_menu li:before { background: #425668; bottom: auto; content: ""; height: 8px; left: 23px; margin-top: 15px; position: absolute; right: auto; width: 8px; z-index: 1; border-radius: 50%; } .nav-md ul.nav.child_menu li:after { border-left: 1px solid #425668; bottom: 0; content: ""; left: 27px; position: absolute; top: 0; } .nav-md ul.nav.child_menu li:last-child::after { bottom: 50%; } .nav.side-menu>li>a, .nav.child_menu>li>a { color: #E7E7E7; font-weight: 500; } .nav.child_menu li li:hover, .nav.child_menu li li.active { background: none; } .nav.child_menu li li a:hover, .nav.child_menu li li a.active { color: #fff; } .nav>li>a { position: relative; display: block; padding: 13px 15px 12px; } .nav.side-menu>li.current-page, .nav.side-menu>li.active { border-right: 5px solid #1ABB9C; } .nav li.current-page { background: rgba(255, 255, 255, 0.05); } .nav li li li.current-page { background: none; } .nav li li.current-page a { color: #fff; } .nav.side-menu>li.active>a { text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0; background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54; background: linear-gradient(#334556, #2C4257), #2A3F54; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; } .navbar-brand, .navbar-nav>li>a { font-weight: 500; color: #ECF0F1 !important; margin-left: 0 !important; line-height: 32px; } .site_title { text-overflow: ellipsis; overflow: hidden; font-weight: 400; font-size: 22px; width: 100%; color: #ECF0F1 !important; margin-left: 0 !important; line-height: 59px; display: block; height: 55px; margin: 0; padding-left: 10px; } .site_title:hover, .site_title:focus { text-decoration: none; } .nav.navbar-nav>li>a { color: #515356 !important; } .nav.top_menu>li>a { position: relative; display: block; padding: 10px 15px; color: #34495E !important; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; } .toggle { float: left; margin: 0; width: 70px; } .toggle a { padding: 15px 15px 0; margin: 0; cursor: pointer; } .toggle ai { font-size: 26px; } .nav.child_menu>li>a { color: rgba(255, 255, 255, 0.75); font-size: 12px; padding: 9px; } .main_menu_side { padding: 0; } .bs-docs-sidebar .nav>li>a { display: block; padding: 4px 6px; } footer { background: #fff; padding: 10px 20px; display: block; } .nav-sm footer { margin-left: 70px; } .footer_fixed footer { position: fixed; left: 0px; bottom: 0px; width: 100%; } @media (min-width: 768px) { .footer_fixed footer { margin-left: 0; } } @media (min-width: 768px) { .footer_fixed .nav-sm footer { margin-left: 0; } } .dropdown-menu { border: medium none; -webkit-box-shadow: none; box-shadow: none; display: none; float: left; font-size: 12px; left: 0; list-style: none outside none; padding: 0; position: absolute; text-shadow: none; top: 100%; z-index: 9998; border: 1px solid #D9DEE4; border-top-left-radius: 0; border-top-right-radius: 0; } .dropdown-menu>li>a { color: #5A738E; } .navbar-nav .open .dropdown-menu { position: absolute; background: #fff; margin-top: 0; border: 1px solid #D9DEE4; -webkit-box-shadow: none; right: 0; left: auto; width: 220px; } .navbar-nav .open .dropdown-menu.msg_list { width: 300px !important; } .sidebar-footer { bottom: 0px; clear: both; display: block; padding: 5px 0 0 0; position: fixed; width: 230px; background: #2A3F54; } .sidebar-footer a { padding: 7px 0 3px; text-align: center; width: 25%; font-size: 17px; display: block; float: left; background: #172D44; } .sidebar-footer a:hover { background: #425567; } a.user-profile { color: #5E6974 !important; } .user-profile img { width: 29px; height: 29px; border-radius: 50%; margin-right: 10px; } .main_menu .fa { width: 26px; opacity: .99; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="images/favicon.ico" type="image/ico" /> <title>Single Page Application</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Font Awesome --> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body class="nav-md"> <div class="container body"> <div class="main_container"> <div class="col-md-3 left_col"> <div class="left_col scroll-view"> <div class="navbar nav_title" style="border: 0;"> <a href="#" class="site_title"><i class="fa fa-paw"></i> SPA</a> </div> <div class="clearfix"></div> <!-- sidebar menu --> <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> <div class="menu_section"> <h3>General</h3> <ul class="nav side-menu"> <li> <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="index.html">Dashboard</a></li> <li><a href="#">Dashboard2</a></li> <li><a href="#">Dashboard3</a></li> </ul> </li> <li> <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">General Form</a></li> <li><a href="#">Advanced Components</a></li> </ul> </li> <li> <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">General Elements</a></li> <li><a href="#">Media Gallery</a></li> </ul> </li> <li> <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Tables</a></li> <li><a href="#">Table Dynamic</a></li> </ul> </li> <li> <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Chart JS</a></li> <li><a href="#">Chart JS2</a></li> <li><a href="#">Moris JS</a></li> <li><a href="#">ECharts</a></li> <li><a href="#">Other Charts</a></li> </ul> </li> <li> <a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Fixed Sidebar</a></li> <li><a href="#">Fixed Footer</a></li> </ul> </li> </ul> </div> <div class="menu_section"> <h3>Live On</h3> <ul class="nav side-menu"> <li> <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">E-commerce</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Project Detail</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Profile</a></li> </ul> </li> <li> <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">403 Error</a></li> <li><a href="#">404 Error</a></li> <li><a href="#">500 Error</a></li> <li><a href="#">Plain Page</a></li> <li><a href="#">Login Page</a></li> <li><a href="#">Pricing Tables</a></li> </ul> </li> <li> <a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#level1_1">Level One</a></li> <li> <a>Level One<span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li class="sub_menu"><a href="level2.html">Level Two</a> </li> <li><a href="#level2_1">Level Two</a> </li> <li><a href="#level2_2">Level Two</a> </li> </ul> </li> <li><a href="#level1_2">Level One</a></li> </ul> </li> <li><a href="#"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li> </ul> </div> </div> <!-- /sidebar menu --> <!-- /menu footer buttons --> <div class="sidebar-footer hidden-small"> <a data-toggle="tooltip" data-placement="top" title="Settings" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="FullScreen" href="#"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="Lock" href="#"><i class="fa fa-lock" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="Logout" href="#"><i class="fa fa-sign-out" aria-hidden="true"></i></a> </div> <!-- /menu footer buttons --> </div> </div> <!-- Header: top navigation --> <header> <div class="top_nav"> <div class="nav_menu"> <div class="nav toggle"> <a id="menu_toggle"><i class="fa fa-bars"></i></a> </div> <nav class="nav navbar-nav"> <ul class=" navbar-right"> <li class="nav-item dropdown open" style="padding-left: 15px;"> <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> <img src="images/img.jpg" alt="">John Doe </a> <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="javascript:;">Profile</a> <a class="dropdown-item" href="javascript:;"> <span class="badge bg-danger pull-right">50%</span> <span>Settings</span> </a> <a class="dropdown-item" href="javascript:;">Help</a> <a class="dropdown-item" href="#"><i class="fa fa-sign-out pull-right"></i> Log Out</a> </div> </li> </ul> </nav> </div> </div> </header> <!-- Header: top navigation --> <!-- Main: page content --> <div class="right_col" role="main"> <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <!-- Main: page content --> <!-- Footer: content --> <footer> <div class="pull-right">Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a></div> <div class="clearfix"></div> </footer> <!-- Footer: content --> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>

If anyone knows an easy way to adjust the code and get desired behavior please let me know. Thanks.

Answer 1

Was it necessary?

 /* Resize function without multiple trigger */ (function($, sr) { // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function(func, threshold, execAsap) { var timeout; return function debounced() { var obj = this, args = arguments; function delayed() { if (!execAsap) func.apply(obj, args); timeout = null; } if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; }; // smartresize jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery, 'smartresize'); var CURRENT_URL = window.location.href.split('#')[0].split('?')[0], $BODY = $('body'), $MENU_TOGGLE = $('#menu_toggle'), $SIDEBAR_MENU = $('#sidebar-menu'), $SIDEBAR_FOOTER = $('.sidebar-footer'), $LEFT_COL = $('.left_col'), $RIGHT_COL = $('.right_col'), $NAV_MENU = $('.nav_menu'), $FOOTER = $('footer'); // Sidebar function init_sidebar() { // TODO: This is some kind of easy fix, maybe we can improve this var setContentHeight = function() { // reset height //$RIGHT_COL.css('min-height', $(window).height()); /* var bodyHeight = $BODY.outerHeight(), footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(), leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(), contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight; // normalize content contentHeight -= $NAV_MENU.height() + footerHeight; $RIGHT_COL.css('min-height', contentHeight);*/ }; var openUpMenu = function() { $SIDEBAR_MENU.find('li').removeClass('active active-sm'); $SIDEBAR_MENU.find('li ul').slideUp(); } $SIDEBAR_MENU.find('a').on('click', function(ev) { var $li = $(this).parent(); if ($li.is('.active')) { $li.removeClass('active active-sm'); $('ul:first', $li).slideUp(function() { setContentHeight(); }); } else { // prevent closing menu if we are on child menu if (!$li.parent().is('.child_menu')) { openUpMenu(); } else { if ($BODY.is('nav-sm')) { if (!$li.parent().is('child_menu')) { openUpMenu(); } } } $li.addClass('active'); $('ul:first', $li).slideDown(function() { setContentHeight(); }); } }); // toggle small or large menu $MENU_TOGGLE.on('click', function() { if ($BODY.hasClass('nav-md')) { $SIDEBAR_MENU.find('li.active ul').hide(); $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active'); } else { $SIDEBAR_MENU.find('li.active-sm ul').show(); $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm'); } $BODY.toggleClass('nav-md nav-sm'); setContentHeight(); }); // check active menu $SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page'); $SIDEBAR_MENU.find('a').filter(function() { return this.href == CURRENT_URL; }).parent('li').addClass('current-page').parents('ul').slideDown(function() { setContentHeight(); }).parent().addClass('active'); // recompute content when resizing $(window).smartresize(function() { setContentHeight(); }); setContentHeight(); // fixed sidebar if ($.fn.mCustomScrollbar) { $('.menu_fixed').mCustomScrollbar({ autoHideScrollbar: true, theme: 'minimal', mouseWheel: { preventDefault: true } }); } } // /Sidebar $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); init_sidebar(); });

 .left_col { background: #2A3F54; } .nav-sm .container.body .col-md-3.left_col { min-height: 100%; width: 70px; padding: 0; z-index: 9999; position: absolute; } .nav-sm .container.body .col-md-3.left_col.menu_fixed {position: fixed; height: 100%;} .nav-sm .container.body .col-md-3.left_col .mCSB_container, .nav-sm .container.body .col-md-3.left_col .mCustomScrollBox { overflow: visible; } .nav-sm .hidden-small { visibility: hidden; } .nav-sm .container.body .right_col { padding: 10px 20px; margin-left: 70px; z-index: 2;} .nav-sm .navbar.nav_title { width: 70px;} .nav-sm .navbar.nav_title a span { display: none;} .nav-sm .navbar.nav_title ai {font-size: 27px;margin: 13px 0 0 3px;} .site_title i { border: 1px solid #EAEAEA; padding: 5px 6px; border-radius: 50%;} .nav-sm .main_container .top_nav {display: block; margin-left: 70px; z-index: 2;} .nav-sm .nav.side-menu li a {text-align: center !important; font-weight: 400; font-size: 10px; padding: 10px 5px;} .nav-sm .nav.child_menu li.active, .nav-sm .nav.side-menu li.active-sm {border-right: 5px solid #1ABB9C;} .nav-sm ul.nav.child_menu ul, .nav-sm .nav.side-menu li.active-sm ul ul {position: static; width: 200px;background: none;} .nav-sm>.nav.side-menu>li.active-sm>a {color: #1ABB9C !important;} .nav-sm .nav.side-menu li a i.toggle-up {display: none !important;} .nav-sm .nav.side-menu li ai {font-size: 25px !important; text-align: center;width: 100% !important; margin-bottom: 5px;} .nav-sm ul.nav.child_menu { left: 100%; position: absolute; top: 0;width: 210px;z-index: 4000; background: #3E5367;display: none;} .nav-sm ul.nav.child_menu li {padding: 0 10px;} .nav-sm ul.nav.child_menu li a { text-align: left !important;} .menu_section h3 { padding-top: 5px;padding-bottom: 5px;padding-left: 23px;color: #fff; background-color: rgba(255, 255, 255, 0.06); text-transform: uppercase;letter-spacing: .5px; font-weight: bold;font-size: 11px; margin-bottom: 0; margin-top: 0; text-shadow: 1px 1px #000;} .menu_section>ul {margin-top: 5px;display: block;} .main_menu span.fa {float: right;text-align: center;margin-top: 5px;font-size: 10px;min-width: inherit;color: #C4CFDA;} .active a span.fa {text-align: right !important;margin-right: 4px;} .nav-sm .menu_section {margin: 0;} .nav-sm span.fa, .nav-sm .menu_section h3 {display: none;} .nav-sm li li span.fa {display: inline-block;} .nav_menu {float: left;background: #EDEDED;border-bottom: 1px solid #D9DEE4;margin-bottom: 10px;width: 100%;position: relative;} @media (min-width: 480px) { .nav_menu {position: static;} .item {display: block;} } .nav-md .container.body .col-md-3.left_col {min-height: 100%;width: 230px;padding: 0;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;z-index: 1;} .nav-md .container.body .col-md-3.left_col.menu_fixed {height: 100%;position: fixed;} body .container.body .right_col {background: #F7F7F7;} .nav-md .container.body .right_col {padding: 10px 20px 0;margin-left: 230px;} .nav_title {width: 230px;float: left;background: #2A3F54;border-radius: 0;height: 57px;padding: 0px;} @media (max-width: 991px) { .nav-md .container.body .right_col, .nav-md .container.body .top_nav {width: 100%;margin: 0;} .nav-md .container.body .col-md-3.left_col {display: none;} .nav-md .container.body .right_col {width: 100%;padding-right: 0;} .right_col {padding: 10px !important;} .item {display: block;} } .container {width: 100%;padding: 0;max-width: 100%;} .navbar-nav>li>a, .navbar-brand, .navbar-nav>li>a {color: #fff !important;} body {color: #73879C;background: #2A3F54;font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;font-size: 13px;font-weight: 400;line-height: 1.471;} .main_container .top_nav {display: block;margin-left: 230px;} .main_content {padding: 10px 20px;} h1,.h1,h2,.h2,h3,.h3 {margin-top: 10px; margin-bottom: 10px;} a {color: #5A738E;text-decoration: none;} a,a:visited,a:focus,a:active, :visited, :focus, :active, .btn:focus,.btn:active:focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn.active.focus {outline: 0;} a:hover, a:focus { text-decoration: none; } .navbar { margin-bottom: 0; } .navbar-header { background: #34495E; } .navbar-right { margin-right: 0; } .top_nav .navbar-right { margin: 13px; width: auto; float: right; } .top_nav .navbar-right li { display: inline-block; float: right; position: static; } @media (min-width: 480px) { .top_nav .navbar-right li { position: relative; } .item { display: block; } } .top_nav .dropdown-menu li { width: 100%; } .dropdown-item { width: 100%; padding: 12px 20px; } .top_nav li ai { font-size: 15px; } .navbar-static-top { position: fixed; top: 0; width: 100%; } .sidebar-header { border-bottom: 0; margin-top: 46px; } .sidebar-header:first-of-type { margin-top: 0; } .nav>li { position: relative; display: block; } .nav.side-menu>li { position: relative; display: block; cursor: pointer; } .nav.side-menu>li>a { margin-bottom: 6px; } .nav.side-menu>li>a:hover { color: #F2F5F7 !important; } .nav.side-menu>li>a:hover, .nav>li>a:focus { text-decoration: none; background: transparent; } .nav.child_menu { display: none; } .nav.child_menu li:hover, .nav.child_menu li.active { background-color: rgba(255, 255, 255, 0.06); } .nav.child_menu li { padding-left: 36px; } .nav-md ul.nav.child_menu li:before { background: #425668; bottom: auto; content: ""; height: 8px; left: 23px; margin-top: 15px; position: absolute; right: auto; width: 8px; z-index: 1; border-radius: 50%; } .nav-md ul.nav.child_menu li:after { border-left: 1px solid #425668; bottom: 0; content: ""; left: 27px; position: absolute; top: 0; } .nav-md ul.nav.child_menu li:last-child::after { bottom: 50%; } .nav.side-menu>li>a, .nav.child_menu>li>a { color: #E7E7E7; font-weight: 500; } .nav.child_menu li li:hover, .nav.child_menu li li.active { background: none; } .nav.child_menu li li a:hover, .nav.child_menu li li a.active { color: #fff; } .nav>li>a { position: relative; display: block; padding: 13px 15px 12px; } .nav.side-menu>li.current-page, .nav.side-menu>li.active { border-right: 5px solid #1ABB9C; } .nav li.current-page { background: rgba(255, 255, 255, 0.05); } .nav li li li.current-page { background: none; } .nav li li.current-page a { color: #fff; } .nav.side-menu>li.active>a { text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0; background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54; background: linear-gradient(#334556, #2C4257), #2A3F54; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; } .navbar-brand, .navbar-nav>li>a { font-weight: 500; color: #ECF0F1 !important; margin-left: 0 !important; line-height: 32px; } .site_title { text-overflow: ellipsis; overflow: hidden; font-weight: 400; font-size: 22px; width: 100%; color: #ECF0F1 !important; margin-left: 0 !important; line-height: 59px; display: block; height: 55px; margin: 0; padding-left: 10px; } .site_title:hover, .site_title:focus { text-decoration: none; } .nav.navbar-nav>li>a { color: #515356 !important; } .nav.top_menu>li>a { position: relative; display: block; padding: 10px 15px; color: #34495E !important; } .nav>li>a:hover, .nav>li>a:focus { background-color: transparent; } .toggle { float: left; margin: 0; width: 70px; } .toggle a { padding: 15px 15px 0; margin: 0; cursor: pointer; } .toggle ai { font-size: 26px; } .nav.child_menu>li>a { color: rgba(255, 255, 255, 0.75); font-size: 12px; padding: 9px; } .main_menu_side { padding: 0; } .bs-docs-sidebar .nav>li>a { display: block; padding: 4px 6px; } footer { background: #fff; padding: 10px 20px; display: block; } .nav-sm footer { margin-left: 70px; } .footer_fixed footer { position: fixed; left: 0px; bottom: 0px; width: 100%; } @media (min-width: 768px) { .footer_fixed footer { margin-left: 0; } } @media (min-width: 768px) { .footer_fixed .nav-sm footer { margin-left: 0; } } .dropdown-menu { border: medium none; -webkit-box-shadow: none; box-shadow: none; display: none; float: left; font-size: 12px; left: 0; list-style: none outside none; padding: 0; position: absolute; text-shadow: none; top: 100%; z-index: 9998; border: 1px solid #D9DEE4; border-top-left-radius: 0; border-top-right-radius: 0; } .dropdown-menu>li>a { color: #5A738E; } .navbar-nav .open .dropdown-menu { position: absolute; background: #fff; margin-top: 0; border: 1px solid #D9DEE4; -webkit-box-shadow: none; right: 0; left: auto; width: 220px; } .navbar-nav .open .dropdown-menu.msg_list { width: 300px !important; } .sidebar-footer { bottom: 0px; clear: both; display: block; padding: 5px 0 0 0; position: fixed; width: 230px; background: #2A3F54; } .sidebar-footer a { padding: 7px 0 3px; text-align: center; width: 25%; font-size: 17px; display: block; float: left; background: #172D44; } .sidebar-footer a:hover { background: #425567; } a.user-profile { color: #5E6974 !important; } .user-profile img { width: 29px; height: 29px; border-radius: 50%; margin-right: 10px; } .main_menu .fa { width: 26px; opacity: .99; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*edit*/ .right_col { height: calc(100vh - 100px); padding: 10px 20px 0; margin-left: 230px; overflow-y: auto; } footer { position: absolute; bottom: 0; right: 0; left: 0; } .main_container { position: relative; height: 100vh; } .nav_menu { margin-bottom: unset; } #sidebar-menu { height: 88vh; overflow: auto; }

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="images/favicon.ico" type="image/ico" /> <title>Single Page Application</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Font Awesome --> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body class="nav-md"> <div class="container body"> <div class="main_container"> <div class="col-md-3 left_col"> <div class="left_col scroll-view"> <div class="navbar nav_title" style="border: 0;"> <a href="#" class="site_title"><i class="fa fa-paw"></i> SPA</a> </div> <div class="clearfix"></div> <!-- sidebar menu --> <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> <div class="menu_section"> <h3>General</h3> <ul class="nav side-menu"> <li> <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="index.html">Dashboard</a></li> <li><a href="#">Dashboard2</a></li> <li><a href="#">Dashboard3</a></li> </ul> </li> <li> <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">General Form</a></li> <li><a href="#">Advanced Components</a></li> </ul> </li> <li> <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">General Elements</a></li> <li><a href="#">Media Gallery</a></li> </ul> </li> <li> <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Tables</a></li> <li><a href="#">Table Dynamic</a></li> </ul> </li> <li> <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Chart JS</a></li> <li><a href="#">Chart JS2</a></li> <li><a href="#">Moris JS</a></li> <li><a href="#">ECharts</a></li> <li><a href="#">Other Charts</a></li> </ul> </li> <li> <a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">Fixed Sidebar</a></li> <li><a href="#">Fixed Footer</a></li> </ul> </li> </ul> </div> <div class="menu_section"> <h3>Live On</h3> <ul class="nav side-menu"> <li> <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">E-commerce</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Project Detail</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Profile</a></li> </ul> </li> <li> <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#">403 Error</a></li> <li><a href="#">404 Error</a></li> <li><a href="#">500 Error</a></li> <li><a href="#">Plain Page</a></li> <li><a href="#">Login Page</a></li> <li><a href="#">Pricing Tables</a></li> </ul> </li> <li> <a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li><a href="#level1_1">Level One</a></li> <li> <a>Level One<span class="fa fa-chevron-down"></span></a> <ul class="nav child_menu"> <li class="sub_menu"><a href="level2.html">Level Two</a> </li> <li><a href="#level2_1">Level Two</a> </li> <li><a href="#level2_2">Level Two</a> </li> </ul> </li> <li><a href="#level1_2">Level One</a></li> </ul> </li> <li><a href="#"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li> </ul> </div> </div> <!-- /sidebar menu --> <!-- /menu footer buttons --> <div class="sidebar-footer hidden-small"> <a data-toggle="tooltip" data-placement="top" title="Settings" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="FullScreen" href="#"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="Lock" href="#"><i class="fa fa-lock" aria-hidden="true"></i></a> <a data-toggle="tooltip" data-placement="top" title="Logout" href="#"><i class="fa fa-sign-out" aria-hidden="true"></i></a> </div> <!-- /menu footer buttons --> </div> </div> <!-- Header: top navigation --> <header> <div class="top_nav"> <div class="nav_menu"> <div class="nav toggle"> <a id="menu_toggle"><i class="fa fa-bars"></i></a> </div> <nav class="nav navbar-nav"> <ul class=" navbar-right"> <li class="nav-item dropdown open" style="padding-left: 15px;"> <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false"> <img src="images/img.jpg" alt="">John Doe </a> <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="javascript:;">Profile</a> <a class="dropdown-item" href="javascript:;"> <span class="badge bg-danger pull-right">50%</span> <span>Settings</span> </a> <a class="dropdown-item" href="javascript:;">Help</a> <a class="dropdown-item" href="#"><i class="fa fa-sign-out pull-right"></i> Log Out</a> </div> </li> </ul> </nav> </div> </div> </header> <!-- Header: top navigation --> <!-- Main: page content --> <div class="right_col" role="main"> <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Success card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="card text-white bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <!-- Main: page content --> <!-- Footer: content --> <footer> <div class="pull-right">Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a></div> <div class="clearfix"></div> </footer> <!-- Footer: content --> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>