3

几天来一直在尝试将我的侧导航扩展到页面底部，我已经谷歌搜索并到处寻找。人们继续说要在您的 HTML 和正文上设置 100% 的高度，并在导航周围使用最小高度：100% 的容器 div，但是这些都不起作用。

开始认为这在 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;
    }
4

1 回答 1

9

看起来您缺少导航的父容器上的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>
于 2013-01-04T19:34:27.840 回答