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

设置div高度以填充剩余高度

1 个答案: