div 高度为 100%，但 space 在顶部 and/or 底部仍然

Question

我正在尝试制作一个带有 position: fixed 和 height: 100% 的侧边导航栏，但是当我尝试这样做时，总是 space 可以看到背景低于或高于 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

Answer 1

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

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

div 高度为 100%，但 space 在顶部 and/or 底部仍然

div height at 100% but there is space on top and/or bottom still

html

css

navbar

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