Html 在页面底部粘贴页脚

我想把页脚贴在页面底部，即使没有内容。当有足够的内容时，页脚应移到页面的末尾

我正在学习flexbox，并尝试使用flexbox。但它不起作用

html{
身高：100%；
}
身体，
#根{
显示器：flex；
弯曲方向：立柱；
}
.app{
文本对齐：居中；
}
.标题，
.页脚{
背景：#282c34；
弹性收缩：0；
颜色：白色；
}
梅因先生{
弹性：10自动；
}
a{
文字装饰：无；
颜色：#42A5F5；
填充：20px0；
}

应用程序名称
小说明
请插入搜索查询

一些随机的公司
接触
啁啾

改为

html

或

#root

设置

.app

作为您的柔性容器，最小高度

为
100vh


*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
}
.app{
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
.标题，
.页脚{
背景：#282c34；
弹性收缩：0；
颜色：白色；
}
梅因先生{
弹性：10自动；
}
a{
文字装饰：无；
颜色：#42A5F5；
填充：20px0；
}

应用程序名称
小说明
请插入搜索查询

一些随机的公司
接触
啁啾
希望这会有所帮助


html{
身高：100%；
}
.app{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
最小高度：100vh；
}
.页脚{
页边顶部：自动；
}
.标题，
.页脚{
背景：#282c34；
弹性收缩：0；
颜色：白色；
}
梅因先生{
弹性：10自动；
}
a{
文字装饰：无；
颜色：#42A5F5；
填充：20px0；
}

应用程序名称
小说明
请插入搜索查询

一些随机的公司
接触
啁啾
为了这里的可视性，我给了.body content类最低高度100vh。对于移动显示媒体查询，您可以将最小高度更改为100%，以便在内容较少的情况下不会有未使用的底部空间。希望这有帮助


.container{
背景：#ccc
}
.正文内容{
最小高度：90vh；
文本对齐：居中；
背景：#fff；
保证金：0；
宽度：400px；
保证金：10px自动
}
.页脚{
背景：#000；
颜色：#fff；
文本对齐：居中；
填充：20px
}

这里的正文内容
这是页脚
？？@Roy当页面有足够的内容时，此解决方案将不适用。另外，如何在不设置
overflow-x:hidden的情况下删除水平滚动条？谢谢，@Praveen。为什么在没有足够内容的情况下滚动条仍然存在？这是因为在body标签上有一个CSS边距，因为我们没有包括任何CSS重置。谢谢，但是为什么滚动条仍然存在？如何在不设置
最小高度：95vw
的情况下删除滚动条？请检查对上述代码段的编辑。非常感谢。我现在知道了。因为您正在将
.app
的
最小高度设置为
100vw
而不是
100vh