當使用flexbox時，子div高度應等於它的父級高度

Question

我的要求是我希望所有文本級別的div應具有相同的高度或應占據父級的所有高度div col。

.flexbox { 
 
    display: flex; 
 
} 
 

 
.col { 
 
    border: 1px solid; 
 
    margin: 20px; 
 
} 
 

 
.text { 
 
    background: green; 
 
}

<div class="flexbox"> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <h3>I am listed first in source order.</h3> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
</div>

Here is the link for working code

Answer 1

您需要使用高度對父div和flex: 1對子div。

因此您.col類添加：

display: flex; 
flex-direction: column; 

並以.text類添加：

flex:1; 

.flexbox { 
 
    display: flex; 
 
} 
 

 
.col { 
 
    border: 1px solid; 
 
    margin: 20px; 
 
    display: flex; 
 
    flex-direction: column 
 
} 
 

 
.text { 
 
    background: green; 
 
    flex: 1; 
 
}

<div class="flexbox"> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <h3>I am listed first in source order.</h3> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
</div>

Here is the fiddle to play with.

希望這會有所幫助。

Answer 2

我想你想的綠色文本覆蓋div的其餘部分。那麼你需要根據div內的剩餘空間設置.text的高度。

這取決於img高度。在您的示例中，圖像的高度爲200像素。

如果高度是動態的，您需要使用類似javascript或jQuery的東西。如果不是（它們具有固定的高度），可以僅使用CSS如在下面的例子中，使用calc()計算.text的高度，從父（.col）

100% =高度的總高度減去圖像高度的.col 200px =的img

.flexbox { 
 
    display: flex; 
 
} 
 
h3,p { 
 
\t margin-top:0 
 
} 
 
.col { 
 
    border: 1px solid; 
 
    margin: 20px; 
 
} 
 

 
.text { 
 
    background: green; 
 
\t height:calc(100% - 200px) 
 
}

<div class="flexbox"> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <h3>I am listed first in source order.</h3> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="img" style="background:red;height:200px;width:200px;"></div> 
 
    <div class="text"> 
 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    </div> 
 
</div>