html - How fixed positioned element gets all height -

I try to understand why I define the devil element and it has been fixed on the left side of the viewport, Without its definition, put the height and no content in it, all the available height of the viewport is available?

I mean that I use div, this block element that gets its height according to its contents (otherwise not defined), in this case there is no content in the div How does all this height get?

I tried to find it in the specification, but did not say anything about it.

Definition in HTML:

  & lt; Div id = "left" & gt; & Lt; / Div & gt;  

Definition in CSS:

  # left {status: fixed; Top: 0; Bottom: 0; Width: 20px; Z-index: 30; Left: 0; Background: Linear-gradient (right, RGBA (209, 209, 209, 0.69) 30%, RGBA (88, 88, 88, 0.92));   
}  
   
 Here is the link of jsfiddle:  
 If I define an element :  
  Status: Completed; Top: 0; Bottom: 0;  
 
 It goes to the height of document.documentElement.clientHeight, which is much less than body / html in my example? I really try to understand this behavior. 
 

Because you have specified top: 0 and below: 0 . Remove below: 0 , and its height will be required.

For example.