html - 固定定位元素如何获取所有高度

Question

我试图理解为什么如果我定义 div 元素并将其固定放置在视口(viewport)的左侧，没有定义其高度，也没有向其中放入一些内容，它会获得视口(viewport)的所有可用高度？

我的意思是我使用 div，它是根据其内容获取高度的 block 元素(如果未另外定义)，在这种情况下 div 没有任何内容，它如何获取所有高度？

我试图在规范中找到它 W3org 但它什么也没说。

HTML 中的定义:

<div id="left"></div>

CSS 中的定义:

#left {
position: fixed;
top: 0;
bottom: 0;
width: 20px;
z-index: 30;
left: 0;
background: linear-gradient(to right, rgba(209, 209, 209, 0.69) 30%, rgba(88, 88, 88, 0.92));

这是 jsfiddle 的链接:example

如果我将元素定义为:

   position: absolute;
   top: 0;
   bottom: 0;

它获取 document.documentElement.clientHeight 的高度，在我的示例中，它比 body/html 小得多？我真的很想理解这种行为。

Answer 1

因为您指定了 top: 0 和 bottom: 0。删除 bottom: 0，它将需要一个高度。

例如在这个jsFiddle .