CSS 设置高度与指定兄弟一样

在前端开发中，经常会遇到需要设置不同元素的高度保持一致的情况。这种情况下，我们可以使用CSS来实现高度与指定兄弟元素相同的效果。本文将详细介绍如何使用CSS来设置元素的高度与指定兄弟元素一样，以及注意事项和具体示例。

方法一：使用 display: flex

Flex布局是现代前端开发中常用的布局方式之一，通过display: flex可以轻松实现高度相同的效果。具体步骤如下：

父元素添加 display: flex 属性。
将需要高度相同的元素放在同一个flex容器中。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height Same As Sibling Using Flexbox</title>
<style>
    .flex-container {
        display: flex;
    }
    .box1, .box2 {
        background-color: #f0f0f0;
        border: 1px solid #333;
        padding: 10px;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="flex-container">
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
</div>
</body>
</html>

在上面的示例中，.flex-container是父容器，.box1和.box2是需要设置高度相同的元素。通过将它们放在一个flex容器中，它们的高度将自动保持一致。

方法二：使用 grid 布局

除了Flex布局，CSS的grid布局也可以实现高度相同的效果。具体步骤如下：

父元素添加 display: grid 属性。
将需要高度相同的元素放在同一个grid容器中。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height Same As Sibling Using CSS Grid</title>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .box3, .box4 {
        background-color: #f0f0f0;
        border: 1px solid #333;
        padding: 10px;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="grid-container">
    <div class="box3">Box 3</div>
    <div class="box4">Box 4</div>
</div>
</body>
</html>

在上面的示例中，.grid-container是父容器，.box3和.box4是需要设置高度相同的元素。通过将它们放在一个grid容器中，它们的高度将自动保持一致。

方法三：使用 JavaScript 动态计算高度

如果在不使用Flex或grid布局的情况下，也可以通过JavaScript动态计算元素的高度来实现高度相同的效果。具体步骤如下：

使用JavaScript获取需要设置高度的元素的高度。
将获取到的高度应用到需要设置高度的元素上。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Height Same As Sibling Using JavaScript</title>
<style>
    .box5, .box6 {
        background-color: #f0f0f0;
        border: 1px solid #333;
        padding: 10px;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="box5" id="box5">Box 5</div>
<div class="box6" id="box6">Box 6</div>

<script>
    const box5 = document.getElementById('box5');
    const box6 = document.getElementById('box6');

    const height = box5.offsetHeight + 'px';
    box6.style.height = height;
</script>
</body>
</html>

在上面的示例中，通过JavaScript动态计算box5的高度，并将其应用到box6上，从而实现了高度相同的效果。