Bootstrap - 将侧面导航扩展到页面底部.高度100%

Question

我已经尝试了几天将我的侧面导航扩展到页面底部,我已经谷歌并且到处寻找.人们继续说要在你的HTML和身体上保持100%的高度,并且在导航周围有一个容器div,最小高度:100%,但这都不起作用.

开始认为这在Twitter Bootstrap中是不可能的,因为它是浮动的.

我不能真正使用绝对位置或任何东西,因为我需要它保持完全响应.我在span 2中有一个侧面导航,我的内容在span10的右边.

导航代码:

<div class="span2">                
    <div class="span10 shadow-right fill" style="background-color: #860038; min-height: 100%;     overflow: hidden;">

    <ul class="side-nav">
      <a href="dashboard/index"><li class="side-box-active">My   Dashboard</li></a>
      <a href="dashboard/control_panel"><li class="side-box">Control Panel</li></a>
      <a href="dashboard/support"><li class="side-box">Support</li></a>
    </ul>

    </div>
</div>

我的CSS:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}
    .side-nav {
      list-style: none;
      margin: 0 !important;
    }

    .side-nav li {
      margin-top: 20px;
      padding-top: 16px;
      margin-bottom: 20px;
      padding-left: 16px;
      cursor: pointer;
      color: #860038;
    }

    .side-nav li a{
      font-size: 15px;
    }

Answer 1

看起来你错过了fill你的类<div class="span2>是你的资产净值的父容器.所以它应该是<div class="span2 fill">.另外,我假设你的跨度嵌套在一行和容器中,这也需要被告知延长100%; 应该看起来像这样:

<div class="container fill">
  <div class="row fill">
    <div class"span2 fill">
      <ul class="side-nav fill">
      </ul>
    <div>
  </div>
</div>