HTML 中，如何让两个并列的标签高度一致（因为其中一个的高度不确定）

最新推荐文章于 2023-04-25 17:12:42 发布

greetfish

最新推荐文章于 2023-04-25 17:12:42 发布

阅读量3.8k

点赞数 1

文章标签： html javascript 布局标签父标签

本文链接：https://blog.csdn.net/greetfish/article/details/45842987

版权

面临的问题是这样的：

一开始想的解决方法就上上面图片中的文字的方法，就是父元素适应子元素2的高度，然后子元素1的高度再去适应父元素的高度，后来经过很多调试，还是得不到效果。

最终采用js代码获取元素2的高度值，然后赋予给元素1.完美实现。

代码如下：

<html>

    <head>
        <meta charset="utf-8">

    </head>
<script type="text/javascript">
    function mappingheight(){
        var son_1=window.document.getElementById("son_1");
        var son_2=window.document.getElementById("son_2");
        son_1.style.height=son_2.style.height;
    }
</script>
    <body οnlοad="mappingheight()">

        <div style="border: 2px solid blue; height: auto;">
            <div id="son_1" style="border: 1px solid red; width:200px ; float: left; background-color: #00008B;">
                <a style="color: #FFFFFF;">SON_1：此布局高度与右边布局的高度一致</a>
            </div>
            <div id="son_2" style="border: 1px solid red; margin-left: 200px;height: 900px;">
                <a>SON_2：此布局的高度不确定，有可能是通过window.open链接过来的</a>
            </div>
            </div>

    </body>

</html>

得到这样的网页，达到目的：