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没有占据vi的70％的高度ewport高度？它似乎只是进一步推动雪佛龙图标。

Answer 1

你可以试试这个：

1. 添加max-width: 100%和max-height: 100%到img限制图像到其容器

2. 添加min-height: 0到img和p覆盖min-height: auto这是默认任何弹性项目。

3. 添加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>