如何使父div和子div具有相同的响应高度

要使父div和子div具有相同的响应高度，可以使用以下方法：

1. 使用Flexbox布局：将父div设置为display: flex，并且设置flex-direction: column。这样子div会自动填充父div的高度。

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

1. 使用CSS Grid布局：将父div设置为display: grid，并且设置grid-template-rows: auto 1fr。这样子div会自动填充父div的高度。

.parent {
  display: grid;
  grid-template-rows: auto 1fr;
}

.child {
  grid-row: 2;
}

1. 使用绝对定位：将父div设置为position: relative，子div设置为position: absolute，并且设置top: 0和bottom: 0。这样子div会根据父div的高度自动调整。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

以上方法都可以实现父div和子div具有相同的响应高度。具体选择哪种方法取决于具体的布局需求和兼容性要求。

腾讯云相关产品和产品介绍链接地址：

• Flexbox布局：https://cloud.tencent.com/document/product/249/30729
• CSS Grid布局：https://cloud.tencent.com/document/product/249/30730
• 绝对定位：https://cloud.tencent.com/document/product/249/30731