Question

对此有一点点母马，但它应该是如此简单，我需要我的.qualification-delete-container div来获得父母div的100％。

我附上了一个小提琴，所以您可以看到。如果减小屏幕尺寸，当.qualification-row-details div（青绿色）的内容占用2行时，.qualification-delete-container（黄色）需要响应并采用新的高度的父母。

孩子div的两个都是display:inline-block

.qualification-row {
  width: 100%;
  padding: 10px 0px 10px 0px;
  text-align: left;
  background-color:green;
}

.qualification-row-details {
  width: calc(100% - 60px);
  height: 100%;
  display: inline-block;
  background-color: turquoise;
}

.qualification-delete-container {
  display: inline-block;
  width: 55px;
  vertical-align: top;
  min-height: 100%;
  float: unset;
  background-color: yellow;
}

.flex-vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

<br/>
<div class="qualification-row js-qualification-row">
  <div class="qualification-row-details">
    degree type, classification, Course title, year, awarding instition
  </div>
  <div class="qualification-delete-container">
    <div class="flex-vertical-center">
      <a class="qualification-delete">delete</a>
    </div>
  </div>
</div>

Answer 1

将您的资格行CSS更改为-

.qualification-row {
  display : flex; // ADD DISPLAY FLEX
  width: 100%;
  padding: 10px 0px 10px 0px;
  text-align: left;
  background-color:green;
}

Answer 2

您可以使用显示表来完成。我已经通过使用显示表和表单元格解决了它。请看看。

我附上了小提琴，这样您就可以看到。

.qualification-row {
  width: 100%;
  text-align: left;
  background-color:green;
  display: table;
}

.qualification-row-details {
  width: calc(100% - 60px);
  height: 100%;
  display: table-cell;

}

.qualification-delete-container {
  display: table-cell;
  width: 55px;
  vertical-align: middle;
  min-height: 100%;
  float: unset;
  background-color: yellow;
  text-align: center;
}
.qualification-row-details-text {
  margin: 10px 10px 10px 0;
  background-color: turquoise;
}

<br/>
<div class="qualification-row js-qualification-row">
  <div class="qualification-row-details">
    <div class="qualification-row-details-text">
    degree type, classification, Course title, year, awarding instition
  </div>
  </div>
  <div class="qualification-delete-container">
      <a class="qualification-delete">delete</a>
  </div>
</div>

CSS-内部div无法达到可用高度

2 个答案: