CODEWITHSUNDEEP
javascripthtmlcss
Rash J
Rash J

Reputation: 143

Set height from another element via css

I would like to have two divs per row. The second div should always display its full content. The height of the first div should always be the same as the height of the second div from the same row. If the height of the first div is not enough to display its content, it should be scrollable.

I set the height of the first div by using javascript but I guess it is not the best solution because the content of the first and the second divs can be changed. So this javascript function will be called a lot of times. Is it possible to get this effect by using css?

My code is:

<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>

Upvotes: 1

Views: 2400

Answers (2)

Sphinxxx
Sphinxxx

Reputation: 13017

Instead of float, you should use some kind of tabular layout here, either CSS Grid or display: table.

This gives you rows where all the divs have the same height (the height of the tallest div in the row). Now, to adjust everything by the last div, you can use position: absolute on the *contents* of the first div, which means it will take whatever space is left after all the other layout has been arranged (notice the extra .cellValue divs inside .firstElementClass in the example below).

.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>

Upvotes: 0

Boudy hesham
Boudy hesham

Reputation: 352

With flexbox you can achieve two divs to be the same height

.rowClass{
display:flex;
}
.firstEl,.secondEl{
flex:1;}

if this is not what you're looking for let me know inthe comments.

Upvotes: -1

Related Questions