HTML 扩展 div 的高度

Question

div.div1 {
  position: relative;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding: 10px;
}

div.div2 {
  background-color: gray;
  border: 1px solid black;
  padding: 10px;
}

div.div3 {
  position: absolute;
  border: 1px solid red;
  height: 20px;
  width: 20px;
  bottom: 10px;
  left: 10px;
}

<div class="div1">
  <div class="div2">Test 123</div>
  <div class="div3">A</div>
</div>

我使用上面的代码来显示一个包含两个 div 的大 div。对于第一个，我使用 position: absolute 将它放在 div 的左下角。

如何扩展第二个灰色的高度，使其比第一个高 5 个像素，但不必测量其确切的像素高度(如下图所示)？例如，我可以设置 height: 50px; 但还有其他方法吗？

Answer 1

我会使用 flexbox 方法而不是绝对定位(下面的 css 注释)

div.div1 {

  display: flex;
  flex-direction:column;
  /* add the above styles*/
  
  border: 1px solid black;
  min-height: 100px;         /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/
  width: 100px;
  padding: 10px;
}

div.div2 {
  flex-grow:1;        /* make div grow to fill the space */
  margin-bottom:5px;  /* minus the amount of margin you wanted */
  
  background-color: gray;
  border: 1px solid black;
  padding: 10px;
}

div.div3 { 
  /* remove absolute positioning */
  border: 1px solid red;
  height: 20px;
  width: 20px;
}

<div class="div1">
  <div class="div2">Test 123</div>
  <div class="div3">A</div>
</div>