制作一个div填满屏幕

Question

继承人我的网站上的图像的100％的高度现在：http://i.imgur.com/nE0a0cj.jpg

的部分说，“什么是球体”是彪是我的内容容器。但是，我似乎无法将它从页眉转到页脚。

我的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; 
} 

我使用尝试 “高度：100vh;”属性，但它使容器超出页脚，因此页面需要滚动。

也认为这可能需要JavaScript来完成，但这是一个我需要一些支持的领域。

谢谢你们提前:)

• 编辑 -

所以我从一个答案想通，我的DIV是另一个DIV中。所以我解决了这个问题，并且提供了相同的代码，它看起来不是这样的：http://i.imgur.com/vYRVqhN.png 认为它可能是bg大小，但是因为它只设置为“覆盖”，所以它不应该成为问题。

Answer 1

最后得到你的要求，弹性盒布局是你的朋友。

观看演示中整版模式：

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>

Answer 2

看起来像您将<div id="container">放在另一个div或任何父元素（除html和body之外）。如果是这样，父元素不具有100％的高度。如果将height:100%;添加到父元素，则您的容器必须填充父元素的整个高度。

我测试了您提供的代码并且它正在工作。