HTML扩展div的高度

div.div1{
位置：相对位置；
边框：1px纯黑；
高度：100px；
宽度：100px；
填充：10px；
}
第2分部{
背景颜色：灰色；
边框：1px纯黑；
填充：10px；
}
第3分部{
位置：绝对位置；
边框：1px纯红；
高度：20px；
宽度：20px；
底部：10px；
左：10px；
}

测试123
A.

您可以在

高度设置上使用
calc
，如下面我的代码片段所示。该设置为100%减去（20+10+2）下一个DIV的高度、边框和底部减去（5+2）距离和第一个DIV的边框减去10px作为父级的填充，总计为49px


div.div1{
位置：相对位置；
边框：1px纯黑；
高度：100px；
宽度：100px；
填充：10px；
}
第2分部{
背景颜色：灰色；
边框：1px纯黑；
填充：10px；
高度：计算（100%-49px）；
}
第3分部{
位置：绝对位置；
边框：1px纯红；
高度：20px；
宽度：20px；
底部：10px；
左：10px；
}

测试123
A.
编辑：我建议，如果你能专注于现代浏览器的功能，那么采用flexbox的方式肯定比我下面介绍的方式更干净。尽管如此，以下是备选方案：

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


div.div1{
位置：相对位置；
边框：1px纯黑；
高度：100px；
宽度：100px；
填充：10px；
}
第2分部{
背景颜色：灰色；
边框：1px纯黑；
填充：10px；
高度：计算(
100%
-20px/*div1：顶部和底部衬垫*/
-2px/*div1：顶部和底部边框*/
-20px/*第3部分：高度*/
-2px/*div3：顶部和底部边框*/
-5px/*所需分离度*/
);
}
第3分部{
位置：绝对位置；
边框：1px纯红；
高度：20px；
宽度：20px；
底部：10px；
左：10px；
}

测试123
A.
我会使用flexbox方法，而不是绝对定位（下面css中的注释）


div.div1{
显示器：flex；
弯曲方向：立柱；
/*添加上述样式*/
边框：1px纯黑；
最小高度：100px；/*我也会将此更改为最小高度，否则如果文本转到两行，可能会导致问题*/
宽度：100px；
填充：10px；
}
第2分部{
flex-grow:1；/*使div增长以填充空间*/
保证金底部：5px；/*减去您想要的保证金金额*/
背景颜色：灰色；
边框：1px纯黑；
填充：10px；
}
div.div3{
/*移除绝对定位*/
边框：1px纯红；
高度：20px；
宽度：20px；
}

测试123
A.
有一个叫做“flex”的新的、时髦的CSS属性，你现在会喜欢它，因为它不需要绝对定位等。我昨天做了类似的事情，我有一个垂直导航栏，我希望顶部有一个菜单，底部有一个菜单。在反应迅速的环境中；使用你的绝对定位方法，可能会导致计算高度的混乱，从而阻止内容重叠。Flex阻止了这一切！Yeyyyy


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

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

现在，你的第三组将永远处于底部。虽然现在
.div3
将扩展整个宽度，以便在div中插入内容并完成BOOM操作。
很好，flexbox一直困扰着我，例如，如果我需要将
一个
div移动到右下角而不是左下角，我应该使用什么？对于绝对位置，我会说
right:5px例如…它就像一个块元素，所以要右对齐一个块元素，可以使用
margin left:auto-。这是一个很好的代码笔，用于计算flex的所有不同设置的功能：谢谢你的帮助，我接受了你的答案。很抱歉打扰您，但我可能遇到的最后一个问题是如何显示两个
A
div，一个用于bot left，一个用于bot right，但在同一行中？我使用另一个div
div4
和
右边距：auto
但它将其放在最下面一行，在第一行下面…我认为您需要将较低的内容包装到另一个div中，如下所示：