时间戳

首页 > 解决方案 > 通过css从另一个元素设置高度

javascript - 通过css从另一个元素设置高度

问题描述

我想divs每行有两个。第二个div应始终显示其全部内容。第一个的高度div应始终与div同一行中第二个的高度相同。如果第一个 div 的高度不足以显示其内容，它应该是可滚动的。

我使用 javascript 设置了第一个 div 的高度，但我想这不是最好的解决方案，因为第一个和第二个 div 的内容可以更改。所以这个javascript函数会被调用很多次。是否可以通过使用 css 来获得这种效果？

我的代码是：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <style>
            .firstElementClass, .secondElementClass{
                float:left;
                width: 30%;
                text-align: center;
            }   
            .firstElementClass{
                background: red;
                overflow: auto;
            }
            .secondElementClass{
                background: yellow;
            }
            .rowClass{
                margin-top: 20px;
                clear:both;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <div class="rowClass">
            <div class="firstElementClass">11aa<br>11aa<br>11aa<br>11aa<br>11aa<br>11aa</div>
            <div class="secondElementClass">11bb<br>11bb<br>11bb<br>11bb</div>
        </div>
        <div class="rowClass">
            <div class="firstElementClass">AA</div>
            <div class="secondElementClass">22bb<br>22bb<br></div>
        </div>
        <div class="rowClass">
            <div class="firstElementClass">AA</div>
            <div class="secondElementClass">33bb<br>33bb<br>33bb<br>33bb</div>
        </div>
        <div class="rowClass">
            <div class="firstElementClass">AA</div>
            <div class="secondElementClass">44bb<br>44bb<br>44bb</div>
        </div>
    </body>

    <script>
        $(function(){
            $(".firstElementClass").each(function(){
                $(this).height($($(this).parent().find(".secondElementClass")[0]).height());
            });
        });
    </script>

</html>

标签： javascripthtmlcss

解决方案

而不是float，您应该在这里使用某种表格布局，CSS Grid或display: table.

这为您提供了所有 div 具有相同高度的行（行中最高 div 的高度）。现在，要通过最后一个div调整所有内容，您可以在第一个position: absolutediv的 *contents* 上使用，这意味着它会占用所有其他布局后剩余的空间（注意下面示例中的额外div ）。.cellValue.firstElementClass

.myTable {
    display: table;
    border-spacing: 20px;
    width: 60%;
}
.rowClass {
    display: table-row;
}
.firstElementClass,
.secondElementClass {
    display: table-cell;
}

.firstElementClass {
    position: relative;
    width: 50%;
    background: red;
}
.firstElementClass .cellValue {
    position: absolute;
    top:0;left:0;bottom:0;right:0;
    overflow: auto;
}

.secondElementClass {
    background: yellow;
}
<div class="myTable">
    <div class="rowClass">
        <div class="firstElementClass">
            <div class="cellValue">11aa<br>11aa<br>11aa<br>11aa<br>11aa<br>11aa</div>
        </div>
        <div class="secondElementClass">
            <div class="cellValue">11bb<br>11bb<br>11bb<br>11bb</div>
        </div>
    </div>
    <div class="rowClass">
        <div class="firstElementClass">
            <div class="cellValue">AA</div>
        </div>
        <div class="secondElementClass">
            <div class="cellValue">22bb<br>22bb<br></div>
        </div>
    </div>
    <div class="rowClass">
        <div class="firstElementClass">
            <div class="cellValue">AA</div>
        </div>
        <div class="secondElementClass">
            <div class="cellValue">33bb<br>33bb<br>33bb<br>33bb</div>
        </div>
    </div>
    <div class="rowClass">
        <div class="firstElementClass">
            <div class="cellValue">AA</div>
        </div>
        <div class="secondElementClass">
            <div class="cellValue">44bb<br>44bb<br>44bb</div>
        </div>
    </div>
</div>

推荐阅读