CSS - Abstand wird angezeigt, wenn auf verschiedene Bildschirmgrößen umgeschaltet wird

Question

Ich habe ein CSS-Problem, eigentlich einen Abstand, der bei einer anderen Bildschirmgröße angezeigt wird. Bitte schauen Sie sich das Bild unten an, um es besser zu verstehen.

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

Normale

Wenn auf eine andere Bildschirmgröße umgeschaltet wird, erscheint die Frage:

ich zweifeln bin, dass das Thema auf der folgenden Zeile ist:

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

Wo die Höhe auf 70% festgelegt wird, wie der grüne Balken auf einigen anderen Bildschirmgrößen geht unter "einigen Informationen IN DIESE KASTEN

Answer 1

Die Sache ist ... es ist immer noch 70%, aber Ihre ursprünglichen 70% wurde basierend auf dem ersten Bildschirm festgelegt - und es war nur eine "magische Zahl", die funktioniert ... aber wie Sie gefunden - funktioniert nicht, wenn der Bildschirm größer oder kleiner ist.

Möglicherweise müssen Sie hier eine Flex-Box verwenden - oder etwas JavaScript, um die Browserhöhe zu überprüfen und dann basierend auf den Elementgrößen einige Entscheidungen zu treffen.

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