HTML 标签包装屏幕(默认)+ 内容(如果溢出)

Question

我了解到如果你想让一个网页将你网页的所有内容包裹起来，你应该单独保留 html 标签的 width 属性，这样高度会自动适应内容。

问题是，在我的例子中，我需要内容是动态的，所以这取决于我在网页上有多少元素，网页需要包装所有的元素。

如果有足够多的元素溢出我电脑屏幕的 100% 没有任何问题，因为网页会自动适应它的内容但是当我的元素少于我电脑屏幕的 100% 时，它只适应内容，所以 html 标签留下一些空间而不覆盖它。

我希望在内容超过屏幕 100% 的情况下，网页会适应它，在内容小于 100% 的情况下，html 标签将覆盖整个屏幕(就像我设置了 height: 100%;)。

这里有一些例子:

• > Example 1 : 涵盖所有内容。 > 确定。
• > Example 2 .仅覆盖内容，不覆盖全屏。 > 不正常。
• > Example 3 .当内容小于 100% 屏幕时覆盖整个屏幕。 > 确定。
• > Example 4 .覆盖全屏但不覆盖全部内容。 > 不正常。

请注意，示例 1 和 示例 2 没有 height: 100%; 属性，并且 示例 3 和 Example 4 都有。

如何设置我的 CSS 的属性，以便 html 标签覆盖屏幕(默认情况下)和内容(如果溢出)？

提前致谢!

Answer 1

最好的方法是使用min-height，以vh为单位:

#container{
    display: flex;
    min-height: 100vh;
    background-color: blue;
}

JSFiddle

但是，请注意 vh 浏览器支持 - caniuse和 MDN .