html - flexbox 半侧布局，左侧图像固定

Question

我如何将屏幕分成一半和左侧是图像固定的(就像导航栏一样，如果你滚动它们仍然留在左边并且不可滚动)

我使用 flexbox 将屏幕分成两半但是有问题。

图像是可滚动的，而不是页面(屏幕)的全高。

我的 CSS:

.fo-container {
  display: flex;
  height: 100%;
  justify-content: space-between;
}


.left-half {
    /* The image used */
  background-image: url("http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg");

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 1;
}

.right-half {
  background-color: white;
  flex: 1;
  align-items: center;
  padding: 1rem;
}

我的 HTML:

<div class="fo-container">
    <div class="left-half"></div>
    <div class="right-half"></div>
</div>

Answer 1

首先将容器设置为 100vh 而不是 100%。

设置两侧的宽度可以通过flex属性(flex-basis)中的第三个值来实现:

flex: 0 0 50%;

右栏滚动可以通过overflow-y实现。

.fo-container {
  display: flex;
  height: 100vh;
}

.left-half {
  background-image: url("https://picsum.photos/200/300"); /* change back to whatever background image you want */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 50%; /* flex-basis: 50% */
}

.right-half {
  flex: 0 0 50%; /* flex-basis: 50% */
  background-color: white;
  padding: 1rem;
  box-sizing: border-box; /* make sure 50% is still 50% after you add padding */
  overflow-y: auto; /* scrollability here */
}

<div class="fo-container">
  <div class="left-half"></div>
  <div class="right-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a erat non dolor auctor tempus vitae vitae metus. Praesent at aliquam sapien, sed lacinia ex. Quisque sed sem non mi malesuada consectetur. Quisque id venenatis massa. Curabitur hendrerit libero eget vehicula tincidunt. Proin ipsum risus, rhoncus eget nibh id, imperdiet euismod risus. Sed tempor quam quis pellentesque posuere. Ut non risus laoreet, iaculis nunc sit amet, gravida turpis. Curabitur eu risus ac tellus ultrices eleifend. In blandit dui sit amet leo lacinia tincidunt. Pellentesque pellentesque elementum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Mauris id efficitur mauris. Integer ultrices sapien in placerat malesuada. Nunc lacinia cursus consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fringilla dignissim convallis. Mauris mattis et risus sit amet convallis. Sed condimentum pellentesque orci vitae molestie.</p>
    <p>Vestibulum maximus sed lectus ut sodales. Donec sit amet sodales enim. Mauris non velit eleifend, sagittis arcu ut, ultrices lectus. Suspendisse potenti. Morbi gravida odio in justo bibendum ullamcorper. Nam at purus ligula. Nulla ornare orci vel vestibulum aliquet.</p>
  </div>
</div>