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

Question

我的容器DIV有几个问题.对于一个它没有正确识别我的内容的高度(我会认为它将超出主要内容和侧边栏的底部,但它不是).你可以在这个页面上看到我的意思.

我还希望容器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%的父元素'.如果父元素没有指定的高度,则不会发生任何事情.您只在身体上设置了100%,但您还需要将其添加到html.

Answer 2

您可以将其设置为查看高度

html, body
{
    height: 100vh;
}

Answer 3

你设置了CSS:

html, body
{
    height: 100%;
}

你需要这个才能让div占用所有的空间.:)