Question

在用户开始滚动之前，我有一张想要覆盖整个屏幕的图像。我正在努力将其与通过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;
}

Answer 1

您可以将主体的高度设置为100vh，以使其充满整个屏幕。那么您可以将.home容器的“溢出”属性设置为“滚动”或“自动”。

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”，以忽略填充并使其填充屏幕。

Answer 2

将家庭内容容器的高度设置为100vh可以解决此问题。

屏幕的图像覆盖高度和页脚粘滞

2 个答案: