Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 639
Jordan Avatar asked May 05 '12 03:05

Jordan


People also ask

How do I make one div the same height as another?

Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.

How do you set the height in CSS to be depending on the content?

Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.

How do you make two divs float the same height?

Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.

How do you calculate dynamic height in CSS?

We use css property height: calc( 100% - div_height ); Here, Calc is a function. It uses mathematical expression by this property we can set the height content div area dynamically.


2 Answers

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?

like image 188
Chords Avatar answered Sep 21 '22 09:09

Chords


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.

like image 38
Starx Avatar answered Sep 21 '22 09:09

Starx