div高度為100％但頂部和/或底部仍有空間

Question

我正在嘗試制作一個側面導航欄，其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

Answer 1

我猜你正在設置bottom: 10px將你的#navbar推到頂部，在那里你首先有10px間距，這會在底部產生相同的間距。 你可以通過應用top: 0; bottom: 0;來強制你的元素從它的父高度的開始/結束伸展top: 0; bottom: 0; top: 0; bottom: 0; （你應該刪除bottom: 10px; ）到#navbar元素。

PS top: 0是多余的，但是我已經設置它來演示這個概念。

的jsfiddle

Answer 2

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

navbar在CSS中設置了10px的底部。

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