html - 在所有方向上偏移量为 0 的绝对位置

Question

刚开始学html和css，一直在看各种网站练习。

这个特定网站 ( http://jsfiddle.net/Hexapod/CWB39/260/show/) 引起了我的注意，但我无法弄清楚这里的元素是如何工作的。

如果您访问该网站，会看到使用 div 元素制作的“事实框”。但是，这些 div 元素由另一个 div 元素组合在一起。这个 div 元素有一个绝对位置和在所有方向上的偏移量 0px。谁能给我解释一下这样做的目的是什么？

这是它的样子:

#container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

<div id="container">
  <div id="factbox1" class="info">
    <!-- some code -->
  </div>
  <div id="factbox2" class="info">
    <!-- some code -->
  </div>
</div>

提前致谢!

附言。如果我在格式方面做错了什么，请通知我!这是我第一次在这里发帖。

Answer 1

这是为了将元素拉伸(stretch)到设置了 position 的最近父级的完全极限。在这种情况下，扩展浏览器视口(viewport)的整个高度和宽度。

它基本上是告诉元素它的顶部应该与它的父元素的顶部相接，它的底部应该延伸到它的父元素的底部并且它的左右两侧相同。

另一种方法是使用以下 CSS:

html, body, #container{
 height:100%:
 width:100%;
}

不同之处在于，通过使用 position:absolute 可以提供分层内容的选项。