How to set height of element to match height of another element?

Question

I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.

Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.

Here's my current HTML:

<div class="flight">
    <div class="flight_no">
        <p>QF2290</p>
    </div>
    <div class="legs">
        <div class="leg">
            <p>Details</p>
        </div>
        <div class="leg">
            <p>Details</p>
        </div>
    </div>
    <div class="price">
        <p>$2500</p>
    </div>
</div>

Here's my current CSS:

.flight
{
    float: right;
    border: 1px solid green;
}

.flight .flight_no, .flight .price
{
    border: 1px solid black;
    float: left;
    width: 100px;
    height: 100%;
    
}

.flight .legs
{
    float:left;
}

.flight .legs .leg
{
    border: 1px solid black;
    position: relative;
    height: 100px;
    width: 300px;
    margin: 20px 0px;
}

Chords · Accepted Answer · 2020-05-26T14:27:57.943

28

It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.

Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

Edit:

Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:

CSS - Equal Height Columns?

edited May 26 '20 at 14:27

answered May 05 '12 at 03:20

Chords

6,720
2
39
61

Thanks for the reply. Can you give me any pointers for this? I've never written JavaScript to do something like this before (and I've got fairly limited experience with JavaScript). – Jordan May 05 '12 at 03:39
Your best bet would be to use a library like jQuery since vanilla JS can be a bit overwhelming. With jQuery, you would want something like this: `$(".flight_no, .price").css("height", $(".legs").height());` – Chords May 05 '12 at 03:45
Here's a jsfiddle so you can see it in action: http://jsfiddle.net/Jyu94/ Try deleting the code from the Javascript pane and you'll see what you originally posted. – Chords May 05 '12 at 03:50
4

Is it possible to accomplish this same result with CSS only, that is, without JavaScript? – Ulysses Alves Jul 11 '15 at 14:31
@hamid it may be worth trying for a CSS-based approach these days. – Chords May 26 '20 at 14:29
@Chords, you're right, but heigth:100% won't help me, because my elements are in different divs. so what do you suggest? – HamiD May 27 '20 at 19:14
@hamid Depending on your browser coverage needs you may not need JavaScript at all, and you can still have equal height fit to the content, see here: https://jsfiddle.net/jka6p7re/ – Chords May 27 '20 at 19:47
@Chords it works because your boxes are all in the same div(wrapper). what if box c is inside another div and another posiotion? Thank you. – HamiD May 27 '20 at 19:55
1

@hamid I think you'll have to lean on some JS for that, here's an example: https://jsfiddle.net/h3rpwju5/1/ – Chords May 28 '20 at 04:40
@Chords That is what I meant :). Thank you! – HamiD May 28 '20 at 09:22

Starx · Answer 2 · 2012-05-05T15:25:27.267

2

Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.

Since there is no fixed height, I used height: 100% and chained up to the body an html.

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

Demo

TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.

edited May 05 '12 at 15:25

answered May 05 '12 at 03:39

Starx

77,474
47
185
261

In your demo, if you shrink the view height (producing a vertical scrollbar) the outside columns display as being shorter than the middle column. – Jake Aug 24 '17 at 21:24

score 0 · Answer 3 · answered May 04 '23 at 14:53

Use css display: table will work for this. No need to do it in JS.

.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
}

<div class="col-container">
    <div class="col">
        a lot of stuff here
     </div>
    <div class="col">
        a little bit of stuff here but its cool because 
        im the same size as my sibling element now due to
        display: table
    </div>
</div>

How to set height of element to match height of another element?

3 Answers3

Linked