設置div高度以填充剩餘高度

Question

我正在製作卡片視圖。這裏顯示的是極其簡化的形式。
我無法讓.main div自動展開以填充懸停時剩餘的垂直空間。

我在StackOverflow上找到的一種方法是使用絕對定位。我不是很批評它，但是當我需要改變描述的字體大小時，我必須改變bottom的界限，否則會有重疊。

是否有解決方法或CSS屬性（在這種情況下爲高度）來做到這一點？
任何不需要.foot div的高度？

div.wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 240px; 
 
    height: 200px; 
 
    color: #171812; 
 
    background: #a0a0a0; 
 
    border-radius: 5px; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:hover { 
 
    height: 250px; 
 
} 
 

 
.head { 
 
    width: 100%; 
 
    padding: 10px 20px; 
 
} 
 

 
.main { 
 
    height: 100px;  /*<<<< HERE*/ 
 
    background: #f00; /*for development purpose*/ 
 
} 
 

 
img { 
 
    height: 100%; 
 
    display: block; 
 
    margin: 10px auto; 
 
} 
 

 
.foot { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    padding: 10px 20px; 
 
}

<div class="wrapper"> 
 
    <div class="head">Name</div> 
 
    <div class="main"> 
 
    <img src="http://i.imgur.com/w5U482j.jpg" /> 
 
    </div> 
 
    <div class="foot"> 
 
    Description 
 
    </div> 
 
</div>

Answer 1

你可以用flex做到這一點，要注意flex-grow財產。此外，您不需要在這裏使用position: absolute：

body { 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 240px; 
 
    height: 200px; 
 
    color: #171812; 
 
    background: #a0a0a0; 
 
    border-radius: 5px; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:hover { 
 
    height: 250px; 
 
} 
 

 
.head { 
 
    padding: 10px 20px; 
 
} 
 

 
.main { 
 
    flex-grow: 1; 
 
    height: 100px; 
 
    background: #f00; 
 
} 
 

 
img { 
 
    height: calc(100% - 20px); 
 
    display: block; 
 
    margin: 10px auto; 
 
} 
 

 
.foot { 
 
    padding: 10px 20px; 
 
}

<div class="wrapper"> 
 
    <div class="head">Name</div> 
 
    <div class="main"> 
 
     <img src="http://i.imgur.com/w5U482j.jpg"/> 
 
    </div> 
 
    <div class="foot">Description</div> 
 
</div>

JSFiddle