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

Question

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

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

演示:

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

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

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