CODEWITHSUNDEEP
javascriptjqueryhtml
vbotio
vbotio

Reputation: 1674

Adding Height to another Div

I'm adding 50px on every click on my div header, and i want to make my div main has the same height of header when header is bigger than it.

I don't know why its not working.

I have this script

$(function () {
    var alturaHeader = $('header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('header').height(function(index, height){
            return (height + 50);
        });

        console.log(alturaHeader);

        if (alturaMain < alturaHeader) {
            alert("test");
            $('.main').css({'min-height': alturaHeader });
        }
    }); 
});

any suggestions ?

JS Fiddle: http://jsfiddle.net/JWf7u/ Thanks.

Upvotes: 1

Views: 60

Answers (2)

Alex
Alex

Reputation: 8072

There is you fiddle code You should update the height of div everytime it changes.

    var alturaHeader = $('header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('header').height(function(index, height){
            return (height + 50);
        });

        alturaHeader = $('header').height()
        if (alturaMain < alturaHeader) {
            $('.main').css({'min-height': alturaHeader });
        }
    });

Upvotes: 2

Deepak Sharma
Deepak Sharma

Reputation: 4170

why dont u use the css property height:100% for main (child) div..

check the below

$(function () {
    var alturaHeader = $('.header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('.header').height(function(index, height){
            return (height + 50);
        });
       // below is not required we are using css to handle this
       /*
        console.log(alturaHeader);

        if (alturaMain < alturaHeader) {
            alert("test");
            $('.main').css({'min-height': alturaHeader });
        }
        */
    }); 
});

--CSS--

.header
{
    border:1px solid black;
}
.main
{
    border:1px solid red;
    height:100%;
}

heigth:100% it will do what u want check the below fiddle http://jsfiddle.net/7fkp9/

remember as we have border right now so they dont have the same height.. it will very by 2 pixel.. for exact same height dont use the border property or set the border-size to zero(0) pixel

Upvotes: 0

Related Questions