Irshad Irshad - 1 month ago 12
jQuery Question

Make height of absolutely postitioned div 100%

I have a absolutely positioned left side bar which contains the menu of website. But I am unable to make its height 100%.
I have tried many tweaks like making

bottom:0
etc.
Here's the test page I have implemented this thing upon https://tradeacademy.in/test-irshad/

/* sidebar settings */
.sidebar {
background-color: #404040;
width: 90px;
position: absolute;
display: block;
top: 51px;
/*bottom: 0;*/
z-index: 1000;
min-height: 100%;
max-height: 400%;
overflow: auto;
}

.sidebar-left {
left: 0;
}

.sidebar ul li{
float: left;
width: 100%;
padding: 30px 0;
border-bottom: 1px solid #535353;
}

.sidebar ul li a{
color: #999999;
float: left;
font-family: 'gothamrounded-medium';
font-size: 12px;
line-height: 16px;
text-align: center;
width: 100%;
text-transform: uppercase;
border-left: 2px solid #404040;
padding: 0 10%;
}

.sidebar ul li a:active, .sidebar ul li.active a, .sidebar ul li a:focus , .sidebar ul li a:hover{
border-color: #e55d42;
background-color: transparent;
color: #fff;
}

.sidebar ul li a i{
color: white !important;
float: none;
width: 23px;
height: 26px;
display: inline-table;
display: table;
margin: 0 auto;
margin-bottom: 10px;
}
.f-profile, .f-courses, .f-videos, .f-pdf, .f-referral{
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}




<!-- sidebar -->
<div class="sidebar sidebar-left sidebar-animate sidebar-md-show" id="left-col">
<ul class="nav navbar-stacked">
<li class="active"><a href="#"><i class="f-profile" aria-hidden="true"></i>My profile</a></li>
<li><a href="#about"><i class="f-courses" aria-hidden="true"></i>All Courses</a></li>
<li><a href="#about"><i class="f-videos" aria-hidden="true"></i>Webinar Videos</a></li>
<li><a href="#about"><i class="f-pdf" aria-hidden="true"></i>Webinar pdf</a></li>
<li><a href="#contact"><i class="f-referral" aria-hidden="true"></i>Referral Link</a></li>
</ul>
</div>
<!-- sidebar -->




Answer

Please try this updated code:

html,body {
  min-height: 100%;
  position: relative;
}

.sidebar {
  background-color: #404040;
  width: 90px;
  position: absolute;
  display: block;
  z-index: 1000;
  overflow: hidden;
  height: 100%;
  padding-top: 51px;
}

@media screen and (min-width: 728px)
.bg9 .workshop-text {
  padding-top: 9%;
  min-height: 450px;
  padding-bottom: 5%;
}

Remove min-height & max-height from .sidebar and add height: 100%; to .sidebar.

And here is a Screenshot how it looks like:

enter image description here