浮动的两个元素,其中一个不设置高度,另一个由内容动态填充,父元素高度aoto,两个子元素高度如何相等

写页面遇到如下问题:

浮动的两个元素,其中一个不设置高度,另一个由内容动态填充,父元素高度aoto,两个子元素高度如何相等。
本想通过css解决,但不设置固定高度,默认就是由内容撑开的。如果内容不一样,肯定撑开的高度也是不一样的。要么设置在css中固定高度,要么就使用js去解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素高度问题相关</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style>
        .father {
            border: 1px solid #00ff00;
            width: 300px;
            height: auto;
        }

        .father::after {
            content: " ";
            display: block;
            clear: both;
            zoom: 1;
        }

        .lf {
            width: 100px;
            background-color: red;
            height: 100%;
            float: left;
        }

        .rt {
            width: 200px;
            height: 300px;
            background-color: #1f5975;
            float: right;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="lf">我是左边</div>
    <div class="rt">我是右边</div>
</div>
</body>
</html>

目前只能通过js解决:

<script>
    // jq解决
    $(".lf").css({height: $(".rt").innerHeight()});
    //原生js解决
    var hl = document.getElementsByClassName("lf")[0];
    var hr = document.getElementsByClassName("rt")[0];
    hl.style.height = hr.offsetHeight + "px";

</script>

你可能感兴趣的:(问题)