调整一个元素的高度以匹配CSS中另一个元素的高度

要调整一个元素的高度以匹配CSS中另一个元素的高度，可以使用以下方法：

使用CSS Flexbox布局：Flexbox是一种弹性盒子布局模型，可以轻松实现元素的自适应布局。通过设置元素的flex属性为1，可以使其自动填充剩余空间，从而与其他元素的高度匹配。具体代码如下：

.container {
  display: flex;
}

.element1 {
  flex: 1;
}

.element2 {
  /* 设置element2的高度与element1相等 */
  height: 100%;
}

使用CSS Grid布局：CSS Grid是一种二维网格布局模型，可以更灵活地控制元素的布局。通过将元素放置在同一行或同一列，并设置grid-template-rows或grid-template-columns属性，可以使它们的高度相等。具体代码如下：

.container {
  display: grid;
  grid-template-rows: auto;
}

.element1 {
  /* 设置element1的高度与element2相等 */
  grid-row: 1;
}

.element2 {
  /* 设置element2的高度与element1相等 */
  grid-row: 1;
}

使用JavaScript动态计算高度：如果无法使用CSS布局来实现高度匹配，可以使用JavaScript来动态计算元素的高度并进行调整。具体代码如下：

const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');

const height = element1.offsetHeight;
element2.style.height = height + 'px';

以上是几种常见的方法来调整一个元素的高度以匹配CSS中另一个元素的高度。具体使用哪种方法取决于具体的布局需求和技术栈。