CODEWITHSUNDEEP
jqueryheightviewport
elbatron
elbatron

Reputation: 705

Set DIV height dynamically based on viewport height

I'm trying to set a div's height to 30% of the viewport height and I would very much like to scale it when the height of the viewport changes.

I tried setting min-height: 30%; height:30% but it is not working.

I took a look at JQuery's height(); but I just don't know how to get started.

Thanks.

Upvotes: 12

Views: 39973

Answers (4)

Nikhil Goswami
Nikhil Goswami

Reputation: 81

This one works 100% for viewport height of any div, section that has this class using Jquery. Use additional function to adjust height to 30% currently it is 100% please promote if you like it.

function thirty_pc() {
    $(".introduction").css({'height':($(window).height())+'px'});
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

Upvotes: 0

nathan
nathan

Reputation: 149

window.onresize=function(){
    $("#selectedDiv").height( ($(window).height()*.3) );
}

Upvotes: 0

Liam Bailey
Liam Bailey

Reputation: 5905

function thirty_pc() {
    var height = $(window).height();
    var thirtypc = (30 * height) / 100;
    thirtypc = parseInt(thirtypc) + 'px';
    $("div").css('height',thirtypc);
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

Upvotes: 29

Bernd Haug
Bernd Haug

Reputation: 2169

This is basically Liam Bailey's answer, but with a thirty_pc() that should be both faster and more concise:

function thirty_pc() {
    $("div").css('height', '' + Math.round(.3 * window.height()));
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

If you like it, please still accept Liam's, but upvote mine. :)

Upvotes: 20

Related Questions