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

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

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

提前谢谢你们：）

编辑 -

所以我从其中一个答案中得知，我的div在另一个div里面。所以我修复了这个问题，使用相同的代码，它看起来不像这样：http://i.imgur.com/vYRVqhN.png 认为它可能是bg大小，但因为它只是设置为“覆盖”它不应该是问题。

Answer 1

最后得到了您的要求，弹性框布局是您的朋友。

在整页模式下观看演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

使div填充100％的屏幕高度

2 个答案: