Question

我试图在左边放一个看起来像this的导航栏。

为此，我将所有元素（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％的事情也没有结束它仍然会滚过页面。有没有人做过一个好的工作侧导航栏设置，也可以使用顶部导航栏，或者有人知道我能做些什么来修复我的内容吗？

Answer 1

我认为你应该展示更多的html和css，这样我们才能更清楚地看到问题所在。但是，高度100％不会考虑父元素的边框和填充。尝试将这些内容归零，以及导航栏的任何其他上升元素：

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

还有其他方法，例如将主内容和导航栏封装在包装元素中 - 使包装器拉伸到整个高度，为导航栏提供透明背景，以便包装元素的背景显示出来;或者查看 faux-columns 。 alistapart

Answer 2

你应该删除.ender和.endar上设置的高度a。它们强制导航栏的高度大于窗口高度。如果出于造型原因需要.ender（例如它包含某种背景），那么我会把它放在导航栏中，而不是在列表中。

所以，删除：

.ender {
height: 100%;
}

.ender a {
height: 100%;
}

我还会删除在body标签上自动设置的边距。

以下是代码：JSfiddle

Answer 3

如果没有更多信息，很难准确说明问题是什么，但似乎从height:100%除了.leftmenu之外的所有元素中删除html，向{{1}添加100％ }和body，并应用重置将起作用。

即：

* {
margin: 0;
padding:0;
}

html, body {
height: 100%;
}

.leftmenu {
height: 100%;
}

Answer 4

您可能会发现这篇文章很有趣：

http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

为了使div达到100％，父母的身高也必须达到100％。

因此，

的其他例子

html, body, span2 {
   height:100%;
}

是对的。

Answer 5

这是你在寻找..？

＆＃13;

html, body {
  margin:0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.leftmenu {
  width: 40%;
  margin-left: 0px;
  height: 100%;
  background: #f9f9f9;
  float: left;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
  height: 100%;
}

.ender {
  height: 100%;
}

.ender a {
  height: 100%;
}

.right-side {
  float: left;
  height: 100%;
  width: 60%;
}

＆＃13;

<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>
<div class="right-side">
  right content
</div>

＆＃13;

制作一个全高度侧导航

5 个答案: