Question

我刚开始学习html和css，而且我一直在寻找各种网站来练习。

这个特定的网站（http://jsfiddle.net/Hexapod/CWB39/260/show/）引起了我的注意，但我很难弄清楚这里的元素是如何运作的。

如果你去网站，有＆＃34;事实框＆＃34;使用div元素制作的。然而，这些div元素由另一个div元素组合在一起。该div元素具有绝对位置，并且在所有方向上的偏移为0px。任何人都可以向我解释这是什么目的吗？

这就是它的样子：

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

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

提前致谢！

PS。如果我对格式化或其他任何事情做错了，请通知我！这是我第一次在这里发帖。

Answer 1

这样就可以将元素拉伸到设置为position的最近父级的完整极限。在这种情况下，要扩展浏览器视口的完整高度和宽度。

它基本上告诉元素它的顶部应该满足其父级的顶部，它的底部应该伸展到它的父级的底部，并且它的左侧和右侧都是相同的。

另一种方法是使用下面的CSS：

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

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

所有方向都有0偏移的绝对位置

1 个答案: