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>