css - div 拉伸 100% 页面高度，无论内容如何

Question

现场（进行中）网站

基本上，无论内容的实际长度如何，我的所有网站内容都集中在一个指定宽度和 100% 预期高度的 div 中。我已经指定height:100%;了html, body，#main但是 div 仍然很短，如本页所示- 我不希望它们成为#main' 的灰色框和屏幕底部之间的任何间隙。这可能吗？如何？

Answer 1

看到这个jsfiddle

html, body {height: 100%;}
.container {min-height: 100%;}

也在这里讨论这个......

适当的 css 以确保 body 元素填满整个屏幕

Answer 2

您可以设置position:absolute，并且应该将其拉伸到底部。似乎这至少在 Opera 和 Chrome 中可以正常工作。

但是，这将与下面的视频播放器发生冲突，并且还会将您的版权声明推到页面下方。也许您可以将通知移到灰色框中？

Answer 3

您可以通过两种方式实现：

1) 如果您不知道页面可能有多长，请将高度设置为 100%。

html, body {
    height: 100%;
}
.yourContainerClass {
    min-height: 100%;
}

2）如果你知道你需要垂直拉伸多少，那么你可以在“vh（垂直高度）”中使用高度。

.yourContainerClass{
    height:80vh;
}

我希望它会帮助你。谢谢！