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>

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

1 个答案: