屏幕的图像覆盖高度和粘性页脚压紧答案

【问题标题】：Image cover height of screen and sticky footer clinch屏幕的图像覆盖高度和粘性页脚压紧
【发布时间】：2019-11-14 11:06:36
【问题描述】：

我想要在用户开始滚动之前覆盖整个屏幕的图像。我正在努力将它与通过 flexbox 实现的粘性页脚结合起来。

我将所有内容包装在一个容器中，并包括 CSS“flex: 1 0 auto”以使其增长以填充空间。页脚具有“flex-shrink: 0”属性。

问题在于内容包装器的高度大于屏幕高度的 100%，因为它包含大量内容。因此，我不能将包含图像的容器的高度设置为 100%，因为图像将覆盖超过屏幕高度。

对于如何解决这个问题有什么建议吗？

标记：

<html>
  <body>
    <div class="home-container">
      <div class="home-content-container">
        Image
      </div>
      <div class="flex-container" id="copywriting-container">
        Blah blah
      </div>
    </div>

   <footer class="navbar footer-navbar navbar-inverse">
    <div class="container footer-container">
       Blah Blah
    </div>
   </footer>
  </body>
</html>

CSS：

html, body {
  height: 100%;
}

html {
  position: relative;
  overflow-y: scroll;
}

body {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  background-color: whitesmoke;
}

∕∕ Content wrapper
.home-container {
  flex: 1 0 auto;
}

// Image container
.home-content-container {
  background-image: image-url("blue_sky_copy5.jpg");
  background-size: cover;
  background-attachment: fixed;
}

 // footer
.footer-navbar {
  flex-shrink: 0;
}

【问题讨论】：

标签： html css twitter-bootstrap-3 flexbox sticky-footer

【解决方案1】：

您可以将 body 的高度设置为 100vh，使其充满屏幕。然后您可以将 .home-container 的“溢出”属性设置为“滚动”或“自动”。

html, body {
  height: 100%;
}

html {
  position: relative;
  overflow-y: scroll;
}

body {
  display: flex;
  box-sizing: border-box;
  height: 100vh;
  flex-direction: column;
  padding-top: 50px;
  background-color: whitesmoke;
}

∕∕ Content wrapper
.home-container {
  flex: 1 0 auto;
  overflow: auto;
}

// Image container
.home-content-container {
  background-image: image-url("blue_sky_copy5.jpg");
  background-size: cover;
  background-attachment: fixed;
}

 // footer
.footer-navbar {
  flex-shrink: 0;
}

请注意，我已将 body 的 box-sizing 属性设置为“border-box”以忽略填充并使其填满屏幕。

【讨论】：

【解决方案2】：

将 home-content-container 的高度设置为 100vh 解决了这个问题。

【讨论】：