'Absolute'容器适合没有宽度/高度CSS规则的视口

Question

我找到了这个页面:http://www.maddim.com/demos/spark-wp/

有一个固定的标题和下面的div延伸到viewport没有宽度或高度定义。它允许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;
}

在firebug中禁用所有JS并删除大部分页面元素后，裸露的#main元素仍然像以前一样运行。

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

Answer 1

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