如何将根html元素的高度显式设置为视口和页面内容的最小值

Question

对此有很多类似的问题，但没有解决方案涵盖所有基础。 （请在结束前阅读！）

我的目标：

• 如果页面上没有太多内容，则根html元素将填充整个视口。

• 如果页面上有很多内容，则根html元素将展开并与页面内容一样高。

• 必须明确定义根html元素的高度（请参阅definition），以便子元素可以使用百分比css语句，如height: 100%。

这里有两个JS小提琴来展示我的意思。我正在寻找适用于这两个示例的单一css规则集：

• Not very much page content
• More page content

侧面菜单示例，说明为什么（3）很重要。我希望sidemenu高度与内容的高度相匹配：

• Not very much page content
• More page content

Answer 1

将#content { height: 100%; }更改为#content { min-height: 100%; }。

Answer 2

如果您将html标记的高度更改为min-height，背景颜色将扩展为整个内容。