爲什麼我的div不佔用其父容器的100％高度？

這裏有點困惑。我很疲憊，所以我敢肯定，我正在做一個愚蠢的錯誤，但這裏是我的HTML/CSS：爲什麼我的div不佔用其父容器的100％高度？

.CAContainer { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.CASideBorder { 
 
    height: 100%; 
 
    background: #000; 
 
    width: 8px; 
 
} 
 
.CAMiddleContainer { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.CATopBorder { 
 
    height: 8px; 
 
    background: #000; 
 
    width: 100%; 
 
} 
 
.CAMiddleTextContainer { 
 
    padding: 40px 80px 40px 80px; 
 
    font-size: 4em; 
 
    color: #000; 
 
} 
 
.CABottomBorderContainer { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 8px; 
 
} 
 
.CABottomBorderLeft, 
 
.CABottomBorderRight { 
 
    flex: 1; 
 
    height: 100%; 
 
    background: #000; 
 
}

<div class="CAContainer"> 
 
    <div class="CASideBorder" id="CALeftBorder"></div> 
 
    <div class="CAMiddleContainer"> 
 
    <div class="CATopBorder"></div> 
 
    <div class="CAMiddleTextContainer"> 
 
     text 
 
    </div> 
 
    <div class="CABottomBorderContainer"> 
 
     <div class="CABottomBorderLeft"></div> 
 
     <div class="CABottomBorderRight"></div> 
 
    </div> 
 
    </div> 
 
    <div class="CASideBorder" id="CARightBorder"></div> 
 
</div>

而且fiddle。

CASideBorder不應該佔用其父容器的100％，該容器的高度是由文本大小和填充CAMiddleTextContainer來計算的？我在這裏錯過了非常明顯的東西嗎？任何幫助表示讚賞。

來源

2016-12-09 shanling

使用的VH，而不是百分比 – Geeky

高度如果容器確實有申報高度含量的100％，只會工作在任何PX /％/ EM/REM。 DOM計算它爲100％沒什麼多數民衆贊成爲什麼它沒有顯示，因爲沒有基地的高度 –

這是因爲您的柔性盒有align-items: center，在這種情況下，它將默認爲內容高度。

你需要做的是去除（讓align-items: stretch開始發揮作用，因爲它是默認值），也從CASideBorder刪除height:100%。

觀看演示如下：

.CAContainer { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.CASideBorder { 
 
    background: #000; 
 
    width: 8px; 
 
} 
 

 
.CAMiddleContainer { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.CATopBorder { 
 
    height: 8px; 
 
    background: #000; 
 
    width: 100%; 
 
} 
 

 
.CAMiddleTextContainer { 
 
    padding: 40px 80px 40px 80px; 
 
    font-size: 4em; 
 
    color: #000; 
 
} 
 

 
.CABottomBorderContainer { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 8px; 
 
} 
 

 
.CABottomBorderLeft, .CABottomBorderRight { 
 
    flex: 1; 
 
    height: 100%; 
 
    background: #000; 
 
}

<div class="CAContainer"> 
 
    <div class="CASideBorder" id="CALeftBorder"></div> 
 
    <div class="CAMiddleContainer"> 
 
    <div class="CATopBorder"></div> 
 
    <div class="CAMiddleTextContainer"> 
 
     text 
 
    </div> 
 
    <div class="CABottomBorderContainer"> 
 
     <div class="CABottomBorderLeft"></div> 
 
     <div class="CABottomBorderRight"></div> 
 
    </div> 
 
    </div> 
 
    <div class="CASideBorder" id="CARightBorder"></div> 
 
</div>

來源

2016-12-09 05:55:10 kukkuz

啊，不知道關於align-items：center。謝謝！完美的作品：^） – shanling

爲什麼我的div不佔用其父容器的100％高度？

回答

相關問題