html - 全尺寸 <main>，页脚推到底部

Question

我的页面分为 3 个部分。 <header> , <main>和 <footer> .

<header>固定在顶部，大小为 109px，边框高 6px，因此 <main>到顶部有 109 像素的边距。

我想要 <main>扩展到 <header> 下面的整个页面和 <footer>那应该，如果没有可用于将其向下推的内容，则停留在屏幕底部和 <main>应该扩展到 <footer>即使没有内容来扩展 <main> 的大小放置背景图像。

<footer>高度为 86px，因为顶部的边框为 80px 和 6px。

拥有<footer>向下推我必须设置 min-hight: 100%;在 body 上，但要在 <main> 上有全屏背景图像我必须设置 height: 100%;在 body 上，但页脚停留在滚动前屏幕底部的位置。

我该如何解决这个问题？

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  /* or min-hight: 100% */
}

#in {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}


/* ---------------------------------------------------------------- */

#all {
  height: 100%;
}

#fullmain {
  padding-top: 109px;
  padding-bottom: 86px;
  text-align: center;
  background: #f5f5f5 url(" http://pre06.deviantart.net/2bf3/th/pre/i/2010/284/b/d/autumn_fortest_ii_by_lotusonlinede-d30jn9b.jpg") no-repeat center center;
  background-size: cover;
  min-height: 100%
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  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: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}


/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  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;
}

<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="fullmain">

  </main>
  <footer id="footer">
    <p id="credit">Footer</p>
  </footer>
</div>

Answer 1

这是您要找的吗？你的问题不清楚。

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  /* or min-hight: 100% */
}

#in {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}


/* ---------------------------------------------------------------- */

#all {
  height: 100%;
}

#fullmain {
  padding-top: 109px;
  padding-bottom: 86px;
  text-align: center;
  background: #f5f5f5 url(" http://pre06.deviantart.net/2bf3/th/pre/i/2010/284/b/d/autumn_fortest_ii_by_lotusonlinede-d30jn9b.jpg") no-repeat center center;
  background-size: cover;
  height: calc(100% - 195px);
}

#header {
  background-color: #25211e;
  border-bottom: 6px solid #1d1a18;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 103px;
  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: #c1b497;
  font-size: 45px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 15px;
}


/* ---------------------------------------------------------------- */

#footer {
  background-color: #25211e;
  border-top: 6px solid #1d1a18;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  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;
}

<div id="all">
  <header id="header">
    <h1 id="heading">My Page</h1>
  </header>
  <main id="fullmain">

  </main>
  <footer id="footer">
    <p id="credit">Footer</p>
  </footer>
</div>