“绝对”容器适合视口不宽度/高度CSS规则

Question

我发现这个页面： http://www.maddim.com/demos/spark-wp/

有一个固定报头和下一个div延绵不具有宽度或高度定义为视口。它允许在y轴上溢出内容，并在必要时应用滚动条（框滚动，无视口滚动条）。该HTML很简单：

<header> ... </header> 
<div id="main" role="main"> ... </div> 

CSS：

#main { 
bottom: 0; 
left: 0; 
overflow-y: scroll; 
position: absolute; 
right: 0; 
top: 89px; 
} 

禁用所有的JS和删除大多数页面元素的萤火后，裸#main元素仍然表现为前。

这里使用了什么技术以及它在哪里定义创建#main容器的这种行为？

Answer 1

这里有一些CSS基础知识。 bottom: 0;正是这样说的。粘贴从视口底部的0像素的底部。 left: 0;和right: 0;做的基本相同。 overflow-y: scroll;表示允许滚动垂直方向上溢出的内容，并且position: absolute;表示将该元素从页面流中取出并将其附加到页面上的一个位置。 top: 89px;通过将该元素定位在距视口顶部89个像素处为头部留出空间。