Question

我有一个带页眉和页脚的页面。如果没有可用于将其向下推的内容，页脚将被推到页面底部。问题是带有背景图像的div不会填充从页眉到页脚的空间。此外，它的父级main也没有调整大小以填充页面。我该怎么办？

＆＃13;

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}

#in {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

header {
  background-color: #131b23;
  border-bottom: 6px solid #0f151a;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 160px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c03221;
  font-size: 55px;
  display: inline-block;
  margin-bottom: -7px;
  margin-top: 15px;
}

#subheading {
  font-family: "slogantextfont";
  font-size: 25px;
  margin-top: 0px;
  color: #f6ae2d;
  margin-bottom: 30px;
}

main {
  text-align: center;
  background: #f5f5f5 url("https://images.unsplash.com/photo-1510940725340-44c002560b46?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center center;
  background-size: cover;
}

#title {
  margin: 0px;
  padding: 0px;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>My Page</title>
</head>

<body>
  <header>
    <h1 id="heading">My Page</h1>
    <h2 id="subheading">BLABLA BLA BLA BLA BLA BLA</h2>
  </header>
  <main>
    <h2 id="title">PICTURE</h2>
    <h2 id="title">PICTURE</h2>
    <h2 id="title">PICTURE</h2>
  </main>
  <footer>
    <p id="credit">BLABLA BLA BLA BLA BLA BLA</p>
  </footer>
</body>

</html>

＆＃13;

Answer 1

你必须做两件事：

在body（100％）
在main上设置明确的高度（79％以考虑页眉和页脚占用的空间）

见下文：

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
  height: 100%;
}

#in {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

header {
  background-color: #131b23;
  border-bottom: 6px solid #0f151a;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 160px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

#heading {
  font-family: "titlefont";
  color: #c03221;
  font-size: 55px;
  display: inline-block;
  margin-bottom: -7px;
  margin-top: 15px;
}

#subheading {
  font-family: "slogantextfont";
  font-size: 25px;
  margin-top: 0px;
  color: #f6ae2d;
  margin-bottom: 30px;
}

main {
  text-align: center;
  background: #f5f5f5 url("https://images.unsplash.com/photo-1510940725340-44c002560b46?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") no-repeat center center;
  background-size: cover;
  height: 79%;
}

#title {
  margin: 0px;
  padding: 0px;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#credit {
  font-family: "Helvetica";
  font-size: 14px;
  color: #c1b497;
  font-weight: 600;
}

<!DOCTYPE html>
<html>

<head>
  <title>My Page</title>
</head>

<body>
  <header>
    <h1 id="heading">My Page</h1>
    <h2 id="subheading">BLABLA BLA BLA BLA BLA BLA</h2>
  </header>
  <main>
    <h2 id="title">PICTURE</h2>
    <h2 id="title">PICTURE</h2>
    <h2 id="title">PICTURE</h2>
  </main>
  <footer>
    <p id="credit">BLABLA BLA BLA BLA BLA BLA</p>
  </footer>
</body>

</html>

Answer 2

设定身高：身高100％，身高100％。

如何使backgorund图像覆盖所有屏幕？

2 个答案: