javascript - 使 div 填充屏幕的 100% 高度

Question

这是我网站的图片:http://i.imgur.com/nE0a0cj.jpg

“什么是 Spheroid”部分是我的内容容器。但是，我似乎无法让它从页眉转到页脚。

我的 HTML 代码:

<div id="container">
    <h2>What is Spheroid?</h2>
</div>

我的 CSS 代码:

html, body {
    background-image:url(001.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
}

#container {
    width: 800px;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #38788E;
}

我试过使用“height: 100vh;”属性，但它会使容器超出页脚，因此需要滚动页面。

我还认为它可能必须使用 JavaScript 来完成，但这是我需要一些支持的领域。

提前谢谢你们:)

• 编辑 -

所以我从其中一个答案中得出结论，我的 div 在另一个 div 中。所以我修复了这个问题，并使用相同的代码提供它看起来不像这样:http://i.imgur.com/vYRVqhN.png 以为它可能是 bg 大小，但由于它仅设置为“覆盖”，所以应该不是问题。

Answer 1

终于满足了您的要求，flex box layout 是您的 friend 。

以全页模式查看演示:

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  background: #eee;
}
header {
  height: 40px;
  background: lightgreen;
}
#container {
  flex: 1;
  width: 800px;
  background: yellow;
  margin: 0 auto;
}
footer {
  height: 30px;
  background: lightblue;
}

<header>header</header>
<div id="container"></div>
<footer>footer</footer>

另一种使用 box-sizing 的方法:

html, body {
  height: 100%;
  margin: 0;
}
body {
  box-sizing: border-box;
  padding-bottom: 70px;
  background: #eee;
}
header {
  height: 40px;
  background: lightgreen;
}
#container {
  width: 800px;
  height: 100%;
  background: yellow;
  margin: 0 auto;
}
footer {
  height: 30px;
  background: lightblue;
}

<header>header</header>
<div id="container"></div>
<footer>footer</footer>