3

サイド ナビゲーションをページの一番下まで拡張しようと何日も前から試みていましたが、Google で検索してあらゆる場所を調べました。人々は、HTML と本文の高さを 100% にし、ナビゲーションの周りに min-height: 100% のコンテナー div を配置するように言い続けていますが、これはどれも機能しません。

フローティングされているため、Twitter Bootstrap ではこれは不可能だと考え始めています。

完全な応答性を維持するためにこれが必要なため、絶対位置などを実際に使用することはできません。スパン 2 にサイド ナビゲーションがあり、コンテンツはスパン 10 の右側にあります。

ナビゲーションのコード:

<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 に答える