'绝对'容器适合没有宽度/高度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并删除firebug中的大多数页面元素后，裸#​​main元素仍然像以前一样。

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

Answer 1

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