Html 如何使CSS模板的内容高度达到100%

我正在使用下面代码中的CSS模板

如何使内容区域达到浏览器窗口的100%高度

CSS模板
* {
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
/*设置顶部导航栏的样式*/
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
/*设置topnav链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
/*悬停时更改颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*设置内容的样式*/
.内容{
背景色：#ddd；
填充：10px；
高度：200px；
/*应移除。仅用于演示*/
}
/*设置页脚的样式*/
.页脚{
背景色：#f1f1；
填充：10px；
}
CSS模板
topnav、内容和页脚

页脚

我尝试将内容高度设置为100%

但我发现我还必须将家长设置为100%

html，正文{
身高：100%；
}
.内容{
背景色：#ddd；
填充：10px；
身高：100%；
}

---

设置这两个选项对我都有效

您可以添加

最小高度：100vh

，此规则添加的最小高度为视口高度的100%

例如：

.content{
背景色：#ddd；
填充：10px；
最小高度：100vh；/*添加最小高度100%*/
}

试试：

.content{height:100vh；}

或

.content{height:100%；}

，我不确定你想要实现什么。100%什么？100%的窗纱？尝试将高度100%设置为body和html标记。看一下视口单位：vw、vh、vmin、vmaxI尝试设置。内容高度设置为100%，但我发现我还必须将父级设置为100%

html，body{height:100%；}