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

你可能会觉得这篇文章很有趣：

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

为了让一个 div 达到 100%，它的父母也需要 100% 的高度。

因此，其他例子

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

是正确的。

于 2013-07-03T00:26:10.173 回答
0

我认为您应该显示更多的 html 和 css，以便我们可以更清楚地看到问题所在。但是，height 100% 没有考虑到父元素的边框和内边距。尝试将这些归零，以将这些用于主体以及导航栏的任何其他上升元素：

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

但是还有其他方法，例如将您的主要内容和导航栏包含在包装元素中 - 使包装拉伸到全高，为导航栏提供透明背景，以便包装元素的背景显示出来；或查看人造列。阿里斯塔帕特

于 2013-07-03T00:09:26.913 回答
0

您应该删除 .ender 和 .endar a 上设置的高度。他们迫使导航栏的高度大于窗口高度。如果您出于样式原因需要 .ender（例如，它包含某种背景），那么我会将其绝对定位在导航栏中，而不是在列表中。

所以，删除：

.ender {
height: 100%;
}

.ender a {
height: 100%;
}

我还将删除在正文标签上自动设置的边距。

这是代码：JSfiddle

于 2013-07-03T00:19:05.953 回答
0

如果没有更多信息，很难确切地说出问题出在哪里，但似乎height:100%从您列出的所有元素中删除除了.leftmenu，将 100% 添加到htmlandbody并应用重置将起作用。

IE：

* {
margin: 0;
padding:0;
}

html, body {
height: 100%;
}

.leftmenu {
height: 100%;
}
于 2013-07-03T00:24:04.593 回答
0

这是你要找的..？

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%;
}
<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>

于 2016-08-26T10:46:52.337 回答