Set DIV height dynamically based on viewport height

jquery height viewport
elbatron picture elbatron · Jul 3, 2011 · Viewed 38.7k times · Source

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.

Answer

Liam Bailey picture Liam Bailey · Jul 3, 2011 
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);
});

Related questions

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
How do you get the rendered height of an element?

How do you get the rendered height of an element? Let's say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. How do you …

Read More
jquery get height of iframe content when loaded

I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe? I am asking this because I can't …

Read More