#sidebar-wrapper { z-index: 5; position: absolute; height:100%; margin-left: -265px; width:265px; background: #2db8d7; overflow-y: auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 265px; } #page-content-wrapper { width: 100%; position: absolute; } #wrapper { padding-left: 265px; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } #page-content-wrapper { position: relative; } .block {height:1200px;} 
 <div id="wrapper"> <div id="sidebar-wrapper"> </div> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="block"> test </div> </div> </div> </div>

How to make the height of #sidebar-wrapper stretch to the bottom of the page?

    1 answer 1

    For example:

     #sidebar-wrapper { z-index: 5; position: absolute; top: 0; bottom: 0; height:100%; margin-left: -265px; width:265px; background: #2db8d7; overflow-y: auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 265px; } #page-content-wrapper { width: 100%; position: absolute; } #wrapper { padding-left: 265px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } #page-content-wrapper { position: relative; } .block {height:1200px;} 
     <div id="wrapper"> <div id="sidebar-wrapper"> </div> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="block"> test </div> </div> </div> </div>

    Add:

     #wrapper { position: relative; } #sidebar-wrapper { top: 0; bottom: 0; }