时间戳

首页 > 解决方案 > 将div的高度设置为父div的底部

html - 将div的高度设置为父div的底部

问题描述

我在父 div 中有 2 个 div：

.core {
  height: 200px;
  /* 200% px is just for showcase, in my app I am using % of another div... */
  background-color: yellow;
}

.boxName {
  display: block;
  position: relative;
}

.boxName span {
  background-color: black;
  color: white;
}

.basicInfo {
  position: relative;
  /*margin-bottom and bottom don't change anything*/
  /*height sets height but including height of the title
        height: 100%;
        margin-bottom: 0%;*/
  bottom: 0%;
  width: 30%;
  background-color: green;
}
<div class="core">
  <div class="boxName"><span>Title</span></div>
  <div class="basicInfo">
    How to set height of this div to the bottom of core div?
  </div>
</div>

现在我想确保 basicInfo div 在核心 div 结束的地方结束（底部对齐）。

我从其他帖子中尝试了很多东西，例如 display: flex, bottom: 0%, margin-bottom: 0% 等。

我很高兴收到你的来信，我做错了什么。在这种情况下，我宁愿不使用 position: absolute 。

小提琴。

谢谢，马辛

标签： htmlcssflexbox

解决方案

只需使用弹性：

.core {
  height: 200px;
  background-color: yellow;


  /* add these */
  display: flex;
  flex-direction: column;
}

.boxName {
  display: block;
  position: relative;
}

.boxName span {
  background-color: black;
  color: white;
}

.basicInfo {
  position: relative;
  width: 30%;
  background-color: green;


  /* add this (makes the second div grow to fill the rest of the column) */
  flex-grow: 1;
}
<div class="core">
  <div class="boxName"><span>Title</span></div>
  <div class="basicInfo">
    How to set height of this div to the bottom of core div?
  </div>
</div>

推荐阅读