flexbox半侧布局，左侧图像固定 [英] flexbox half side layout, left side image fixed

问题描述

如何固定屏幕的左右两侧是固定的图像(如导航栏，如果您滚动它们仍在左侧且不可滚动)

How I can split screen half and left side is image fixed (like navbars if you scroll they are still left and isn't scrollable)

我正在使用flexbox将屏幕拆分为一半，但是有问题.

Im using flexbox to split screen to half but there is problem.

图像是可滚动的，不是页面(屏幕)的全部高度.

Image is scrollable and not full height of page(screen).

我的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>

推荐答案

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

Start with setting the container to 100vh instead of 100%.

可以使用flex属性(flex-basis)中的第三个值来设置两侧的宽度:

Setting the width of the 2 sides can be achieved with the third value in the flex property (flex-basis):

flex: 0 0 50%;

使用overflow-y可以实现向右滚动列.

The scrolling right column can be achieved with 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>

这篇关于flexbox半侧布局，左侧图像固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！