Question

我正在尝试在左侧放置一个容器，该容器在所有情况下都占据全部高度，即使窗口高度很小并且有滚动条。右侧还有一个按比例缩放的背景图像。

当容器的高度不足时，我遇到的问题是仅得到背景颜色，因为视口高度而不是外部窗口高度。有没有办法在可滚动和不可滚动条件下保持背景颜色完整？

演示：

https://jsfiddle.net/x1o5n2bL/1/

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  /* height: 100%; */
  background: url(https://picsum.photos/id/965/4300/2820) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.https://picsum.photos/id/965/4300/2820', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://picsum.photos/id/965/4300/2820', sizingMethod='scale')";
}

.left {
  width: 50%;
  float: left;
  background-color: black;
  color: white;
}

/* enabling this breaks the background-color when there is a scroll */
html,
body,
.left {
  height: 100%;
}

<div class="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos cumque quae, corporis temporibus odio ab, aliquid omnis, a ullam quos voluptatem cum recusandae culpa earum tempore quisquam dignissimos accusantium?</p>
  <p>Nihil maxime ad nulla, repudiandae sequi tenetur. Amet ut quo consequatur molestiae veritatis neque quam ex libero, minus exercitationem, obcaecati dolorum aliquam corrupti laudantium alias velit corporis architecto in pariatur.</p>
  <p>Fugit nulla, dolores eius sint quibusdam autem perferendis inventore veniam distinctio porro, maiores facilis quos enim saepe tenetur aliquam quod deserunt rem laborum amet illo repellat ea. Sint, eius, distinctio?</p>
  <p>Architecto nisi autem atque iusto excepturi consequuntur, porro blanditiis, debitis harum et labore libero ipsam sequi temporibus accusamus ratione, tempore sed eveniet modi. Ipsam, illo, corporis. Error in non, beatae?</p>
  <p>Doloribus aspernatur doloremque qui blanditiis nisi, explicabo alias possimus quo adipisci pariatur, excepturi quisquam ab! Necessitatibus temporibus eos, omnis recusandae nihil beatae facere tenetur ipsa ex iure, sit doloremque, labore.</p>
  <p>Ad sunt voluptates quos. Quibusdam animi mollitia itaque dignissimos impedit ducimus tempora hic voluptatibus quam provident! Alias quam, pariatur aut error magnam, earum magni repellat reiciendis, aliquid, maiores repellendus accusamus.</p>
</div>

Answer 1

有一种方法可以做到这一点。您可以做背景职位：解决所有问题的解决方法。滚动时这将使背景保持在同一位置

Answer 2

在左侧div上使用min-height: 100%。

.left {
    ...
    min-height: 100%;
}

在可滚动内容上具有全高背景色

2 个答案: