HTML扩展div的高度

Question

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如何扩展第二个灰色的高度，使其高于第一个灰色高度，但不必像素一样测量其精确高度（如下图所示）？我可以设置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>

Answer 2

编辑：我建议，如果你可以专注于现代浏览器功能，那么以shown by Pete的方式使用flexbox方式肯定比我下面展示的方法更清晰。话虽如此，这里有替代方案：

您可以使用calc动态确定div2的高度：

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;
  height: calc(
    100%
    - 20px /* div1: padding top and bottom */
    - 2px  /* div1: border top and bottom */
    - 20px /* div3: height */
    - 2px  /* div3: border top and bottom*/
    - 5px  /* desired separation*/
  );
}

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的box-sizing设置为border-box（You might want to set this for all elements），则可以避免在计算中包含填充和边框宽度：

div {
  box-sizing: border-box;
}

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;
  height: calc(
    100%
    - 20px /* div3: height */
    - 5px  /* desired separation */
  );
}

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>

Answer 3

这个相当新的，时髦的CSS属性叫做'flex'你现在会喜欢它，因为它完全不需要定位绝对等等。我昨天做了类似的事情，我有一个垂直的导航栏和我想在顶部有一个菜单，在底部有一个菜单。在敏感的环境中;使用你的绝对定位方法会导致一个令人讨厌的混乱，以阻止内容重叠。 Flex阻止了这个！ Yeyyyyy

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在您的示例中，您希望执行以下操作：

.div1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.div2 {
    align-self: flex-start;
    flex-grow:1;
    width:100%;
}
.div3 {
    align-self: flex-end;
    width:100%;
}

现在你的div 3总是在底部。虽然现在.div3会扩展整个宽度，所以在div中插入你的内容和BOOM。

Answer 4

您可以在calc设置中使用height，如下面的代码段所示。该设置为100％减去（20 + 10 + 2），下方DIV的高度，边框和底部减去（5 + 2）距离，第一个DIV的边框减去10px，用于父级的填充，求和高达49px。

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;
  height: calc(100% - 49px);
}

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>