您的位置：首页 > Web前端 > HTML

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

2015-05-19 11:51 477 查看

面临的问题是这样的：

一开始想的解决方法就上上面图片中的文字的方法，就是父元素适应子元素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 onload="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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航