使绝对位置的高度达到100％

Question

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

更新：将其封闭在具有min-heigh的父div：100％和position：relative解决问题。

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

删除min-height＆amp;最大高度来自.sidebar并添加高度：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;
}

而不是相对于父级制作高度，而是相对于视口的高度。

Documentation

Answer 4

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

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