Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 479
elbatron Avatar asked Jul 03 '11 18:07

elbatron


People also ask

How do I change the size of a DIV dynamically?

The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.

How do I set the height of a div to 100?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do you calculate height from screen size?

If you have the screens diagonal, you can multiply that measurement by 0.872 to get the screen's width. You can also multiply the diagonal by 0.49 to get the screen's height.


1 Answers

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);
});
like image 101
Liam Bailey Avatar answered Sep 29 '22 13:09

Liam Bailey