html - “绝对”容器适合没有宽度/高度 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 像素的位置，为标题提供空间。