【问题标题】：div height at 100% but there is space on top and/or bottom stilldiv 高度为 100%，但顶部和/或底部仍有空间
【发布时间】：2015-04-23 22:14:32
【问题描述】：

我正在尝试制作一个带有position: fixed 和height: 100% 的侧边导航栏，但是当我尝试这样做时，总是有空间你可以看到div 下方或上方的背景。顺便说一句，我也尝试让height 像1000px 一样，但我仍然遇到同样的问题。

HTML：

<div id='navbar'></div>

CSS：

#navbar {
  background-color:black;
  width:100px;
  height:100%;
  z-index:99;
  position:fixed;
  left:-10px;
  bottom:10px;
}

JSFiddle

【问题讨论】：

在这种情况下，bottom:10px 表示#navbar 的底部从其容器底部开始向上 10px。见bottom @ MDN。
@showdev 评论是正确的。无论如何，也许您可以使用vh 而不是百分比，这取决于您尝试使用的浏览器support

标签： html css navbar

【解决方案1】：

我猜您将bottom: 10px 设置为将您的#navbar 推到您最初拥有10px 间距的顶部，这会导致底部间距相同。您可以通过将top: 0; bottom: 0;（您应该删除bottom: 10px;）应用到#navbar 元素来强制您的元素从其父高度的开始/结束处拉伸。

附： top: 0 是多余的，但我已经设置它来演示这个概念。

JSFiddle

【讨论】：

希望他能选择你的答案，毕竟你是第一个回答者。

【解决方案2】：

https://jsfiddle.net/7oxyvab5/2/

导航栏在 CSS 中设置了 10px 的底部。

#navbar {
 background-color:black;
 width:100px;
 height:100%;
 z-index:99;
 position:fixed;
 left:-10px;
 bottom:0px;
}

【讨论】：