CODEWITHSUNDEEP
csshtmlheight
Jordan
Jordan

Reputation: 938

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

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

Upvotes: 24

Views: 110828

Answers (3)

Dave
Dave

Reputation: 11

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>

Upvotes: 1

Chords
Chords

Reputation: 6850

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?

Upvotes: 29

Starx
Starx

Reputation: 79069

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.

Upvotes: 3

Related Questions