显示两个元素,每个元素占屏幕高度的50%

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将如果视高度50%.

div.contained {
  height: 50vh;
  /* DEMO STUFF BELOW */
  background: orange;
}
div.contained:first-child {
  background: grey;
}

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