Иметь полноцветный фоновый цвет для прокручиваемого содержимого

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

Используйте min-height: 100% в левом углу.

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

Answer 2

Есть способ сделать это .... Вы можете сделать background-position: fixed, чтобы решить все проблемы. Это позволит фону оставаться в том же положении при прокрутке