使绝对定位的div的高度为100％

Question

我有一个绝对定位的左侧栏，其中包含网站菜单。 但是我无法使其高度达到100％。 我尝试了许多调整，例如使bottom:0等。

更新：将其包含在具有min-heigh：100％和position：relative的父div中解决了该问题。

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

请尝试以下更新的代码：

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%;
}

从.sidebar移除min-height和max-height并添加高度：100％; 到.sidebar。

这是一个屏幕截图，它是什么样的：

Answer 2

对于身体：

position: absolute;
width: 100%;

并去除高度：100％；

Answer 3

使用视口单位。

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

而不是相对于父级设置高度，而是相对于视口设置高度。

文献资料

Answer 4

@nstungcom是正确的，但您还需要.sidebar上的bottom: 0 。 这些是修改：

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