0

このように左側にナビゲーションバーを配置しようとしています。

そのために、すべての要素 (html、body) を 100% にしました。それから私はそれをこのように構成しました

HTML:

<div class="span2 leftmenu">
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li class="ender"><a></a></li>
  </ul>
</div>

CSS:

.leftmenu {
  margin-left: 0px;
  height: 100%;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
  height: 100%;
}

.ender {
  height: 100%;
}

.ender a {
  height: 100%;
}

私が抱えている問題は、ナビゲーションバーが常に画面の下部を通過することです。ページの終わりまで突き出して伸ばしたいと思います。100% にすると過ぎてしまい、60% のようにしても最後までスクロールしなくてもページをスクロールします。トップナビゲーションバーでも動作するサイドナビゲーションバーのセットアップをうまく機能させた人はいますか、それとも私が持っているものを修正するために何ができるか知っていますか?

4

5 に答える 5

0

問題が何であるかをより明確に理解できるように、より多くの html と css を表示する必要があると思います。ただし、高さ 100% では、親要素の境界線とパディングは考慮されません。body および navbar のその他の優勢な要素について、これらをゼロにしてみてください。

body {
    margin: 0; padding: 0; border: 0;
}

ただし、メインコンテンツとナビゲーションバーをラッパー要素で囲むなど、他のアプローチもあります。ラッパーを高さいっぱいまで伸ばし、ナビゲーションバーに透明な背景を与えて、ラッパー要素の背景が透けて見えるようにします。または偽列を調べます。アリスタパルト

于 2013-07-03T00:09:26.913 に答える