CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3css-position
Irshad
Irshad

Reputation: 222

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.

Update: Enclosing it in a parent div having min-heigh:100% and position:relative solves the problem. 

/* 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 -->

Upvotes: 0

Views: 86

Answers (4)

nstungcom
nstungcom

Reputation: 347

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

Upvotes: 1

paulflakstad
paulflakstad

Reputation: 88

@nstungcom is right, but you also need bottom: 0 on your .sidebar. These are the modifications:

html,
body {
  min-height: 100%;
  position: relative;
}
.sidebar {
  bottom: 0;
  /*position: fixed; /* maybe? */
}

Upvotes: 0

Palak Chaudhary
Palak Chaudhary

Reputation: 27

for body :

position: absolute;
width: 100%;

and remove height:100%;

Upvotes: 1

roberrrt-s
roberrrt-s

Reputation: 8210

Use viewport units.

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

Rather then making the height relative to the parent, they make the height relative to your viewport.

Documentation

Upvotes: 0

Related Questions