CSS - 切换到不同屏幕尺寸时显示间距

Question

我有一个CSS问题，实际上是一个间距，显示在不同的屏幕尺寸下。请查看下面的图片以便更好地了解。

<div id="map" style="width: 100%; height:70%"></div>

<div class="subTitle">Subtitle is here</div>

    <div class="details">
  <ion-grid class="borderBottom" no-padding>
    <ion-row padding>
         </ion-row>
  </ion-grid>
  <ion-row>
    <button ion-button full color="light"></button>
  </ion-row>
</div>

CSS

 .subTitle{
 padding: 4px 0 5px 0;
font-size: 4.7vw;
background-color: #22a800;
width: 100%;
text-align: center;
color: white;
font-weight: 600;
 }


 .details{
 width: 100%;
bottom:0;
background: white;
text-align: center;
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
 border-top:1px solid #dedede;
 width:100%;
 position: fixed;
background: #f9f9f9;
  }

正常

切换到其他屏幕尺寸时，会出现问题：

我怀疑问题出在以下几行：

   <div id="map" style="width: 100%; height:70%"></div>

高度设置为70％时，其他一些屏幕尺寸上的绿条低于＆＃34; 此框中的某些信息＆＃34;

Answer 1

事情是......它仍然是70％，但你原来的70％是基于第一个屏幕设置的 - 它只是一个神奇的数字＆＃39;有效......但正如你所发现的那样 - 当屏幕更大或更小时，它不起作用。

您可能需要在此处使用一些弹性框 - 或某些JavaScript来检查浏览器高度，然后根据元素大小做出一些决定。

https://jsfiddle.net/sheriffderek/xws3e18z/

<div class="map">
  map
</div>

<div class="sub-title">
  sub-title
</div>

<div class="other-stuff">
  other-stuff
</div>

<div class="button">
  button
</div>

...

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

div {
  padding: 1rem;
}

.map {
  background: gray;
  flex-grow: 1;
}

.sub-title {
  background: lightgreen;
}

.other-stuff {
  background: white;
  flex-basis: 100px;
}

.button {
  background: lightgray;
}