无论内容如何，​​div拉伸100％页面高度

Question

live (work in progress) site

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

Answer 1

请参阅此jsfiddle

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

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

proper css to ensure that the body element fills the entire screen

Answer 2

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

然而，这将与下面的视频播放器发生冲突，并且还会将您的版权声明推到页面下方。也许你可以把通知移到灰盒子里了吗？

Answer 3

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

1）如果您不知道页面多长，则将高度设为100％。

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

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

.yourContainerClass{
    height:80vh;
}

我希望它将对您有所帮助。谢谢！