Question

我正在尝试显示两个div，一个在另一个上面，每个占用屏幕高度的一半

<ion-view view-title="Locator">
    <ion-content data-tap-disabled="true" scroll="false">
      <div class="container">
        <div class="contained">
          <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
        </div>
        <div class="contained">
          <ion-scroll>
            <ion-list>
              <ion-item>Item 1</ion-item>
              <ion-item>Item 2</ion-item>
              <ion-item>Item 3</ion-item>
              <ion-item>Item 4</ion-item>
              ...
            </ion-list>
          </ion-scroll>
        </div>
    </ion-content>
</ion-view>

第一个div应该显示第二个可滚动列表的地图。

Answer 1

您需要使用vh（视口高度），其中数字将等于高度的百分比。

如果视口高度为50vh，那么div.contained { height: 50vh; /* DEMO STUFF BELOW */ background: orange; } div.contained:first-child { background: grey; }将是50％。

<ion-view view-title="Locator">
    <ion-content data-tap-disabled="true" scroll="false">
      <div class="container">
        <div class="contained">
          <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
        </div>
        <div class="contained">
          <ion-scroll>
            <ion-list>
              <ion-item>Item 1</ion-item>
              <ion-item>Item 2</ion-item>
              <ion-item>Item 3</ion-item>
              <ion-item>Item 4</ion-item>
              ...
            </ion-list>
          </ion-scroll>
        </div>
    </ion-content>
</ion-view>

{{1}}

显示两个元素，每个元素占屏幕高度的50％

1 个答案: