如何让两个div元素的高度相等（其中一个的高度为自动）

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .A{
            position: absolute;
            left: 0;
            width: 100px;
            background-color: red;
        }
        .B{
            position: absolute;
            left: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div>
    <div class="A" id="A">测试<br>测试<br>测试<br>测试</div>
    <div class="B" id="B">测试</div>
</div>

<script>
    document.getElementById("B").style.height=document.getElementById("A").style.height;
</script>

</body>
</html>

我希望A和B的高度一样高，但运行后A高、B矮。
我该怎么办？

A没有style属性，所以document.getElementById("A").style.height是没有值的，可以使用offsetHeight获取a容器高度。而且注意加上px单位

题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .A {
            position: absolute;
            left: 0;
            width: 100px;
            background-color: red;
        }

        .B {
            position: absolute;
            left: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div class="A" id="A">测试<br>测试<br>测试<br>测试</div>
        <div class="B" id="B">测试</div>
    </div>
    <script>
        document.getElementById("B").style.height = document.getElementById("A").offsetHeight + 'px';
    </script>
</body>
</html>

你在A B的同一个父容器，也就是外层那个div设置
display:flex就可以了

加一个css属性，margin 0试试。