CODEWITHSUNDEEP
javascriptjquery
longforshort
longforshort

Reputation: 84

Set height of div, relative to browser window height

Currently this determines window height and sets the height of .one to 1/2 of the window height, and .two to 1/4 of the window height.

How could this be reformatted to use a percentage-based heights instead of the fractions?

I'd like to do something like 80%/20% or 70%/30%. Thanks in advance.

$(function(){
    $(window).load(function(){
        $('.one').css({'height':(($(window).height()/2))+'px'});
        $('.two').css({'height':(($(window).height()/4))+'px'});
    });
    $(window).resize(function(){
        $('.one').css({'height':(($(window).height()/2))+'px'});
        $('.two').css({'height':(($(window).height()/4))+'px'});
    });
});

Upvotes: 0

Views: 4033

Answers (4)

Ashish Kumar
Ashish Kumar

Reputation: 3039

Actually I recommend to get the height of window on both the events first. And then apply the simple math calculations.

$(function(){
    $(window).bind("load resize", function(){
        _winHeight = $(window).height();

        // Setting Height
        $('.one').css({'height':_winHeight * 0.5}); // 0.5 = 50%, 0.8 = 80%
        $('.two').css({'height':_winHeight * 0.25}); // 0.25 = 25%
    });
});

or you can store the unit height of the window in the variable and the apply as much percentage as you want, like:

$(function(){
        $(window).bind("load resize", function(){
            _winHeight = $(window).height()/100;

            // Setting Height
            $('.one').css({'height':_winHeight * 50}); // 50% Height
            $('.two').css({'height':_winHeight * 25}); // 25% Height
        });
    });

Tip:

  • try binding both load and resize events together, this will save your code length.
  • Also, there is no need to mention unit px with height in jquery.

Good luck! Happy jQuery!!

Upvotes: 0

Ani
Ani

Reputation: 4523

Here you go: Fiddle: http://jsfiddle.net/Lk7Ve/ and http://jsfiddle.net/Lk7Ve/2/

This is for 50% and 25%. If you want it for 80% and 20%, you'll have to multiply by (4/5) and (1/5) respectively. 

$(document).ready(function(){
    $('.one').css({'height':(($(window).height()/2))+'px'});
    $('.two').css({'height':(($(window).height()/4))+'px'});
});
$(window).resize(function(){
    $('.one').css({'height':(($(window).height()/2))+'px'});
    $('.two').css({'height':(($(window).height()/4))+'px'});
});

For 80% and 20%

$(document).ready(function(){
    $('.one').css({'height':(($(window).height() * (4/5)))+'px'});
    $('.two').css({'height':(($(window).height() * (1/5)))+'px'});
});
$(window).resize(function(){
    $('.one').css({'height':(($(window).height() * (4/5)))+'px'});
    $('.two').css({'height':(($(window).height() * (1/5)))+'px'});
});

Upvotes: 0

Haji
Haji

Reputation: 2077

$(function(){
    $(window).load(function(){
        $('.one').css({'height':($(window).height()/2)});
    });
 });

It is not necessary to say 'px' in your coding. it won't take any effect.. if don't set it will take as pixel only. To reduct 50% height you can calculate it in fractions as 50/100=1/2 . So above coding will reduce your height 50%.. similary for 25% use 25/100=1/4

Upvotes: 0

gherkins
gherkins

Reputation: 14973

Why not use CSS?

html, body{
  height: 100%;
}

.one{
    height: 50%;
}

.two {
    height: 25%;
}

Upvotes: 1

Related Questions