CODEWITHSUNDEEP
csslayout
Khoi Nguyen
Khoi Nguyen

Reputation: 1092

Make 2 divs have same height as parent

I created a layout with 2 columns by divs, however the columns's height are difference. I want a div will be expanded as height as another one.

The link is my demo http://jsbin.com/UjiyufO/2

Kindly please give me any suggestion.

Upvotes: 0

Views: 592

Answers (3)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

If you add this Javascript it will work

$(document).ready(function(){
    var myheight= $('#header').height(); 
    var thatheight= $('#content').height(); 
    if(myheight>thatheight)
    {
        $('#content').css('height',myheight)
    }
    else
    {
        $('#header').css('height',thatheight)
    }
});

Check this JSbin

Upvotes: 1

lxrmido
lxrmido

Reputation: 11

Make sure the parent element #main has an exactly height, or the 2 divs' 100% height couldn't work.

You can also use this:

#main{ overflow:hidden; }
#header,#content{           
  width: 40%;
  display: block;
  border: 1px solid;
  float: left;
  margin-bottom:-1000px;
  padding-bottom:1000px;
}

Upvotes: 1

david
david

Reputation: 3218

Set your 2 divs with the same height. Example :

#main div{
    height: 500px;
}

In your demo, there is a tag <div> with the id=main which have 2 divs. And there just set the 2 divs with the same height.

Upvotes: -1

Related Questions