flexbox 半边布局，左侧图像固定答案

【问题标题】：flexbox half side layout, left side image fixedflexbox 半边布局，左侧图像固定
【发布时间】：2019-08-25 10:30:54
【问题描述】：

如何将屏幕分成两半和左侧是图像固定的（如果您滚动导航栏，它们仍然在左侧且不可滚动）

我正在使用 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>

【问题讨论】：

将代码改为：

并在css中：.left-half，右半{高度：100vh；宽度：50vw； } .left-half{ 位置：固定； }

标签： html css flexbox

【解决方案1】：

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

可以通过flex属性（flex-basis）中的第三个值来设置2边的宽度：

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>

【讨论】：