如何将容器DIV的高度设置为窗口高度的100%？

Question

我的容器DIV有几个问题。首先，它不能正确识别我的内容的高度(我本以为它会超出主内容和侧边栏的底部，但事实并非如此)。你可以在this page上看到我的意思。

我还希望容器DIV始终填满屏幕/窗口的可用高度。我尝试将其设置为min-height:100%，但没有任何效果。

下面是我在容器DIV中使用的CSS：

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

如果能帮上忙，我将不胜感激。

谢谢,

尼克

Answer 1

将这个添加到你的css中：

html, body {
    height:100%;
}

如果你说高度:100%，你的意思是'100%的父元素‘。如果父元素没有指定的高度，则不会发生任何事情。你只在body上设置了100%，但是你也需要将它添加到html中。

Answer 2

您可以将其网络设置为视图高度

html, body
{
    height: 100vh;
}

Answer 3

您是否设置了CSS：

html, body
{
    height: 100%;
}

您需要这样做才能使div占据所有空间。:)