Html 如何实现Airbnb菜单和地图并排？

我试图实现一个菜单和地图并排类似于Airbnb的实现。特别是在调整窗口大小时，地图位于侧菜单下的位置

我试着让菜单和地图有一个绝对位置，每个位置都有一个特定的百分比宽度。它确实将它们并排放置，但是当我尝试使菜单垂直滚动时，当您调整窗口大小时，地图开始与侧菜单重叠

。显示行{
填充：16px；
宽度：26%；
身高：100%；
位置：绝对位置；
溢出x：隐藏；
溢出y：自动；
}

我希望贴图保持在侧菜单下，不重叠，但当我调整窗口大小时，贴图开始与侧菜单重叠

下面是我试图实现的Airbnb示例的链接

这就是我的实现在重叠时的样子

.显示行{
填充：16px；
宽度：26%；
身高：100%；
位置：绝对位置；
}

我可以用有角度的粘性的东西来解决这个问题。

---

这里有一个关于如何安装和使用的链接。

您必须注意，air bnb正在使用一个库来粘贴该地图，以便只有菜单滚动。您需要做的不仅仅是应用上面提供的css。你可能想试试semantic ui Stick让我知道你是否能解决它，或者我会帮你解决。谢谢@MosiaThabo，我能通过你使用semantic ui Stick的建议解决它。我最终没有使用语义用户界面，而是使用了一些做得很好的东西。我喜欢这些图书馆，它们让生活更轻松。“又干得好了！”莫西亚塔博：是的，他们真的干得好。谢谢你的帮助，再次谢谢。干得好，曼纽尔。

<div style="height: 100%;">
  <div class="show-rows">
      <div class="show-row" *ngFor="let show of shows; let i=index"> 
      <div>
  <div>
  <div #spacer></div>
  <div stickyThing [spacer]="spacer">
      <div #map style="width: 65%; position: absolute; left: 500px;" [ngStyle]="{'height': getViewPortHeight()}"></div>
  </div>
</div>

.show-rows {
  padding: 16px;
  width: 26%;
  height: 100%;
  position: absolute;
}