Question

我有一个父div和两个子div。第二个子div是可变高度，但绝对位于父div的底部。

我希望第一个div具有基于第二个div的动态高度。我认为margin-bottom: 10px会指定第一个div的高度，直到第二个div的10px，但显然这不是真的。

是否有任何解决方法可以获得我想要的东西？

HTML：

<div class="parent">
  <div class="first">
     Hello
  </div>
  <div class="second" >
  </div>
</div>

CSS：

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.first {
  background-color: green;
  margin-bottom: 10px;
}

.second {
  height: 100px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
}

的jsfiddle： https://jsfiddle.net/4tjqsron/2/

Answer 1

边缘底部只是告诉浏览器“不要让任何东西进入我的底部10px内”，正如你所发现的那样。

我认为这可能是使用calc() css函数的绝佳机会！

试试这个：

.first {
     background-color: green;
     height: calc(100% - 110px);
}

这应该在您的第一个和第二个子元素之间留出10px的空间。基本上它告诉浏览器第一个元素是占用其父级的100％减去110px。有关calc（）函数的更多信息，请参阅此处。 https://www.w3schools.com/cssref/func_calc.asp 我希望这有帮助！

编辑：我刚刚想到，这只有在你的身高设置在其他地方时才有效。您可能需要调整100％参数的使用，具体取决于您当前的父高设置。即使是这种情况，calc（）函数仍应证明是有用的。

Answer 2

我不是非常明确地指出你的观点，这是我的解决方案，div.second将始终在div.parent的底部垂直对齐：

＆＃13;

.parent {
  height: 500px;
  min-width: 500px;
  position: relative;
  background-color: red;
}

.first {
  background-color: green;
  margin-bottom: 10px;
}

.second {
/*   height: 100px;
  background-color: grey;
  bottom: 0px;
  box-sizing: border-box;
  position: absolute;
  width: 100%; */
  max-height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
}

＆＃13;

<div class="parent">
  <div class="first">
     Hello
  </div>
  <div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>

＆＃13;

根据第二个孩子div

2 个答案: