根据窗口大小更改高度

Question

I want to change the height of a div to be percentage based as opposed to pixel based, I have the below code and I'm curious how i would now change it from pixels to percentage.

The end result is I want a div to re-size its height based on a percentage of the current height of the window.

Edit: The height and width condition as per the code below isn't actually needed, but it's there for testing purposes as i was trying to find a solution.

Please forgive my naivete, I'm relatively new to JavaScript.

$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
        $(".gallery-container").css('height',(h < 768 || w < 1024) ? 800 : 400);
    });
});

Answer 1

By the power of math!

var h = $(window).height();
var scale = 0.75; // This is 75%
$(".gallery-container").css('height', h * scale);

Answer 2

According to your JavaScript code (I'm guessing it's not exactly correct) this is the corresponding solution in CSS:

.gallery-container { height: 400px; }

@media screen and (max-width: 1024px) or (max-height: 768px)  {
 .gallery-container { height: 800px; }
}

Answer 3

I found another solution that seems to be working perfectly at the moment.

$(window).resize(function(){
   var newheight = $(window).innerHeight();      
   $(".gallery-container, #static ul li img").height(newheight / 2);
});