Question

我正在尝试并排实现菜单和地图，类似于Airbnb的实现。调整窗口大小时，尤其是地图在侧边菜单下的位置。

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

<div style="height: 100%;">
  <div class="show-rows">
      <div class="show-row" *ngFor="let show of shows; let i=index"> 
      <div>
  <div>
  <div #map style="height: 100%; width: 74%; position: absolute; left: 500px;"></div>
</div>

.show-rows {
  padding: 16px;
  width: 26%;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
}

我希望地图保留在侧面菜单下并且不会重叠，但是当我调整窗口大小时，地图开始与侧面菜单重叠。

这是我尝试实现的Airbnb示例的链接。

Airbnb

这是我的实现与重叠的Menu and Map

的样子

Answer 1

<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;
}

我能够通过使用有角度的粘东西解决这个问题。这是有关如何安装和使用angular-sticky-things的链接。

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

1 个答案: