时间戳

首页 > 解决方案 > CSS - 内部 div 不占用可用高度

css - CSS - 内部 div 不占用可用高度

问题描述

对此有点母马，但它应该很简单，我需要我.qualification-delete-container div采取 100% 的 parent div。

我附上了一个小提琴，所以你可以看到。如果你减小屏幕尺寸，当.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>

标签： css

解决方案

将您的资格行 css 更改为 -

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

推荐阅读