Höhe Eigenschaft von div nicht richtig in meiner Flexbox

Question

Ich versuche, ein digitales Mobiltelefon auf meiner Homepage zu erstellen. Die Idee ist, dass dieser Bildschirm schließlich mit meinen Informationen darauf und einer Aufforderung zum Scrollen nach unten aufleuchtet.

Leider verhält sich das div, das der Umriss des Telefonbildschirms ist, nicht, wie ich in Bezug auf die Höhe-Eigenschaft erwarten würde. Hier sind zwei Screenshots um das Problem zu veranschaulichen:

HTML:

<div class="no-container" id="landing-page"> 
    <div class="flexbox-center-row"> 
     <div class="flexbox-center-col" id="digital-phone"> 
      <div id="digital-phone-decorations"> 
       <div id=speaker> 

       </div> 
       <div id="camera"> 

       </div> 
      </div> 
      <div class="screen-glow" id="digital-phone-screen"> 
       <div class="center-text flexbox-center-col" hidden> 
        <img class="img-fluid" src="includes/img/cole-logo-3.svg"></img> 
        <p>Tap the Button Below</p> 
       </div> 
      </div> 
      <div class="begin-btn"> 
       <a><i class="fa fa-chevron-down text-shadow" aria-hidden="true"></i></a> 
      </div> 
     </div> 
    </div> 
</div> 

SCSS:

h1 { 
    font-size: calc(200% + 0.25vw); 
    padding-top: 4vh; 
} 

.begin-btn { 
    color: white; 
    display: flex; 
     justify-content: center; 
    font-size: 60px; 
    opacity: 1; 
    transition: all 0.2s; 

    a:active { 
     transform: scale(1.3); 
    } 

    .fadeIn { 
     opacity: 0; 
    } 
} 

#digital-phone { 
    border: 2px solid white; 
    border-radius: 20px; 
    height: 90vh; 
    padding: 0 25px; 
} 

#digital-phone-screen { 
    border: 2px solid white; 
    height: 70vh; 
    padding: 0; 
    width: 40vh; 

    div { 
     background: white; 
     height: 100%; 
     padding: 15vh 10px 0 10px; 
     justify-content: space-between; 
     width: 100%; 
    } 

    p { 
     font-size: calc(80% + 0.25vw); 
    } 
} 

#landing-page { 
    background: $blue; 
    min-height: 100vh; 
    padding-top: 5vh; 
} 

#speaker { 
    border-radius: 40px; 
    width: 60px; 
} 

#camera { 
    border-radius: 50px; 
    width: 15px; 
} 

#digital-phone-decorations { 
    display: flex; 
     justify-content: center; 
     align-content: center; 
    padding: 15px 0; 

    div { 
     border: 2px solid white; 
     height: 15px; 
     margin: 0 5px; 
    } 
} 

.screen-glow { 
    box-shadow: 0 0px 5px rgba(256, 256, 256, 0.9);; 
} 

@media (min-width: 768px) { 
    .begin-btn { 
     font-size: 90px; 
     margin-top: 40vh; 
    } 
} 

.flexbox-center-row { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
} 

.flexbox-center-col { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

Was hier los ist und warum dies div nicht auf seine Höhe von 70% der vi nehmen ewport Höhe? Es scheint nur das Chevron-Icon weiter runter zu drücken.

Answer 1

Sie können dies versuchen:

1. hinzufügen max-width: 100% und max-height: 100% zum img Bild auf seine Behälter zu beschränken

2. hinzufügen min-height: 0 zum img und der p außer Kraft setzen die min-height: auto, die standardmäßig von alle flex Artikel.

3. hinzufügen box-sizing: border-box zu ihrem Behälter (besser Zurücksetzen body Marge und das Hinzufügen von border-box für alle Elemente)

Demo Siehe unten:

body { 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
    font-size: calc(200% + 0.25vw); 
 
    padding-top: 4vh; 
 
} 
 

 
.begin-btn { 
 
    color: white; 
 
    display: flex; 
 
    justify-content: center; 
 
    font-size: 60px; 
 
    opacity: 1; 
 
    transition: all 0.2s; 
 
} 
 

 
.begin-btn a:active { 
 
    transform: scale(1.3); 
 
} 
 

 
.begin-btn .fadeIn { 
 
    opacity: 0; 
 
} 
 

 
#digital-phone { 
 
    border: 2px solid white; 
 
    border-radius: 20px; 
 
    height: 90vh; 
 
    padding: 0 25px; 
 
} 
 

 
#digital-phone-screen { 
 
    border: 2px solid white; 
 
    height: 70vh; 
 
    padding: 0; 
 
    width: 40vh; 
 
} 
 

 
#digital-phone-screen div { 
 
    background: white; 
 
    height: 100%; 
 
    padding: 15vh 10px 0 10px; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    box-sizing: border-box; /* ADDED */ 
 
} 
 

 
#digital-phone-screen p { 
 
    font-size: calc(80% + 0.25vw); 
 
    min-height: 0; /* ADDED */ 
 
} 
 

 
#digital-phone-screen img { 
 
    max-width: 100%; /* ADDED */ 
 
    max-height: 100%; /* ADDED */ 
 
    min-height: 0; /* ADDED */ 
 
} 
 

 
#landing-page { 
 
    background: #1da0ba; 
 
    min-height: 100vh; 
 
    padding-top: 5vh; 
 
} 
 

 
#speaker { 
 
    border-radius: 40px; 
 
    width: 60px; 
 
} 
 

 
#camera { 
 
    border-radius: 50px; 
 
    width: 15px; 
 
} 
 

 
#digital-phone-decorations { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-content: center; 
 
    padding: 15px 0; 
 
} 
 

 
#digital-phone-decorations div { 
 
    border: 2px solid white; 
 
    height: 15px; 
 
    margin: 0 5px; 
 
} 
 

 

 
} 
 
.screen-glow { 
 
    box-shadow: 0 0px 5px rgba(256, 256, 256, 0.9); 
 
} 
 
@media (min-width: 768px) { 
 
    .begin-btn { 
 
    font-size: 90px; 
 
    margin-top: 40vh; 
 
    } 
 
} 
 
.flexbox-center-row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.flexbox-center-col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<div class="no-container" id="landing-page"> 
 
    <div class="flexbox-center-row"> 
 
    <div class="flexbox-center-col" id="digital-phone"> 
 
     <div id="digital-phone-decorations"> 
 
     <div id=speaker> 
 

 
     </div> 
 
     <div id="camera"> 
 

 
     </div> 
 
     </div> 
 
     <div class="screen-glow" id="digital-phone-screen"> 
 
     <div class="center-text flexbox-center-col" hidden> 
 
      <img class="img-fluid" src="http://placehold.it/100x300" /> 
 
      <p>Tap the Button Below</p> 
 
     </div> 
 
     </div> 
 
     <div class="begin-btn"> 
 
     <a><i class="fa fa-chevron-down text-shadow" aria-hidden="true"></i></a> 
 
     </div> 
 
    </div> 
 
    </div>