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

Question

我正在尝试在左侧放置一个在所有情况下都占据全高的容器，即使 window 高度很小并且有一个卷轴。右侧还有一张按比例缩放的背景图片。

我遇到的问题是，当左容器的高度不足时，它只会获取背景颜色，因为视口高度不是外部 window 高度。有没有办法在可滚动和不可滚动的情况下保持背景颜色不变？

演示：

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

有办法做到这一点.... 你可以做background-position:fixed来解决所有的问题。这将使背景在滚动时保持相同的位置

Answer 2

左边使用min-height: 100%div。

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

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

Have full height background color on scrollable content

css

height

background-image