div의 높이 속성이 내 flexbox에서 제대로 작동하지 않습니다.

Question

내 홈페이지에 디지털 이동 전화를 만들려고합니다. 아이디어는 결국 화면에 내 정보와 아래로 스크롤하라는 메시지가 켜질 것입니다.

불행히도 전화 화면의 윤곽선 인 div는 높이 속성과 관련하여 예상대로 동작하지 않습니다.

이

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

여기에가는 이유는 무엇 이것을 여기에 문제를 설명하는 두 개의 스크린 샷입니다 div의 70 %를 차지하지 않는 div ewport 높이? 그것은 셰브론 아이콘을 더 아래쪽으로 밀고있는 것 같습니다.

Answer 1

이 작업을 시도 할 수 있습니다 :

1. 이의 기본 인 min-height: auto 대체 할

2. 가 img과 p에 min-height: 0 추가 컨테이너에 이미지를 제한 할 img에 max-width: 100% 및 max-height: 100% 추가 어떤 플렉스 아이템. 그들의 용기에 box-sizing: border-box 추가

3. (더 나은 body 마진을 재설정하고 모든 요소에 대한 border-box 추가) 데모는 아래를 참조

을 :하는 것을 잊지 마세요

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>