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

Treacherous

Answer 1

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?

Guendolen

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). – Treacherous

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()); – Guendolen

Here's a jsfiddle so you can see it in action: jsfiddle.net/Jyu94 Try deleting the code from the Javascript pane and you'll see what you originally posted. – Guendolen

Is it possible to accomplish this same result with CSS only, that is, without JavaScript? – Pimento

@hamid it may be worth trying for a CSS-based approach these days. – Guendolen

@Chords, you're right, but heigth:100% won't help me, because my elements are in different divs. so what do you suggest? – Counterfeit

@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: jsfiddle.net/jka6p7re – Guendolen

@Guendolen 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. – Counterfeit

@hamid I think you'll have to lean on some JS for that, here's an example: jsfiddle.net/h3rpwju5/1 – Guendolen

@Guendolen That is what I meant :). Thank you! – Counterfeit

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

Lattermost

In your demo, if you shrink the view height (producing a vertical scrollbar) the outside columns display as being shorter than the middle column. – Viveca

Answer 3

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>

Insouciance