div高度为100％但顶部和/或底部仍有空间

Question

我正在尝试制作一个包含position: fixed和height: 100%的侧面导航栏，但是当我尝试这个时，总有一些空间可以看到下方和/或{之上的背景{1}}。顺便说一句，我也尝试将div设为height，但我仍然遇到同样的问题。

HTML：

1000px

CSS：

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

JSFiddle

Answer 1

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

P.S。 top: 0是多余的，但我已将其设置为演示这一概念。

JSFiddle

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