HTML标记包装屏幕（默认情况下）+内容（如果溢出）

Question

我了解到，如果您想要将网页包含在网页的所有内容中，您应该单独保留width标记的html属性，以便height将自动适应内容。

问题在于，在我的情况下，我需要内容是动态的，这取决于我在网页上有多少项目，网页需要包装所有内容。

如果有足够多的项目溢出我电脑屏幕的100％，则没有任何问题，因为网页会自动适应其内容，但当我的电脑数量少于我电脑屏幕的100％时仅适应内容，因此html标记会留下一些空间而不会覆盖它。

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

这里有一些例子：

• Example 1：涵盖所有内容。 ＆GT; OK。
• Example 2。仅覆盖内容，而不是全屏。 ＆GT; NOT OK。
• Example 3。当内容小于100％屏幕时覆盖全屏。 ＆GT; OK。
• Example 4。覆盖全屏而不是完整内容。 ＆GT; NOT OK。

请注意Example 1和Example 2没有height: 100%;属性，且Example 3和Example 4拥有该属性。

如何设置CSS的属性，以便html标记同时覆盖屏幕（默认情况下）和内容（如果溢出）？

提前致谢！

Answer 1

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

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

JSFiddle

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