当使用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>