确保div占用整个视口

Question

首先，这是代表问题的JSFiddle。

我想要一个“容器”id，它是整个视口的大小。这样，div中的所有#container项都适合页面而不滚动。我假设height: 100%，html和body中的#container会发生这种情况。

似乎.thirdwidth元素的高度是完整视口的高度，并且不仅仅是扩展到#container div的底部（如果你检查元素，它似乎是.thirdwitdh元素超出了#container）

有人知道为什么会这样吗？我希望能够让所有第0-3节适合页面而不需要滚动。

Answer 1

要达到100% viewport高度，您可以尝试100vh，但为什么要将它的位置置于绝对位置。

    body {
  margin:0;
  padding:0;
}

#container {
    height: 100vh;
    width: 100%;
    position:relative;
    overflow:hidden;
}

Answer 2

感谢@Abbr获得此答案（我想发布一个独立的答案，因此它不会隐藏在评论中）

由于gameinfo ID是父div的20％，因此将.thirdwidth列设置为100％高度会使整个页面成为120％

将CSS中height的{​​{1}}更改为80％修复了它！