div的高度屬性在我的flexbox中表現不正確

我正在嘗試在我的主頁上創建數字移動電話。這個想法是，最終屏幕將會顯示我的信息並提示向下滾動。div的高度屬性在我的flexbox中表現不正確

不幸的是，作爲手機屏幕輪廓的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沒有佔據vi的70％的高度ewport高度？它似乎只是進一步推動雪佛龍圖標。

來源

2017-09-13 Samuel Cole

不要忘了爲您所有的flex屬性加上前綴 –

你是什麼意思？ –

閱讀[this]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）文章，然後向下滾動到「前綴固定Flexbox」部分。 –

你可以試試這個：

添加max-width: 100%和max-height: 100%到img限制圖像到其容器
添加min-height: 0到img和p覆蓋min-height: auto這是默認任何彈性項目。
添加box-sizing: border-box其容器（更好復位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>

來源

2017-09-13 14:31:51 kukkuz

@SamuelCole讓我回答你的問題，如果它對你有幫助，請立刻/接受，謝謝！ – kukkuz

div的高度屬性在我的flexbox中表現不正確

回答

相關問題