how to make height auto depends in screen resolution

Question

I've been thinking this for almost a days. But I can't find any solution in my problem.

Is there a way to set auto height div with scroll bar, because as of now I'm using a fix height but I see the problem that when I open it in another laptop or pc with bigger or smaller screen resolution its still in the fix height.

Here's my div:

<div style="overflow:auto; width:1050px; height:760px;">

here's my link so you can see the program

All I want is the height will be auto depending in the screen resolution..

Answer 1

You could use a script to get the computed window height and set it equal to the targeted element height. In this instance, the function is executed on load and on resize. Each element with a class of autoheight will be given a height equal to the height of the window's height:

EXAMPLE HERE

var setElementHeight = function () {
    var height = $(window).height();
    $('.autoheight').css('min-height', (height));
};

$(window).on("resize", function () {
    setElementHeight();
}).resize();

The above method is fine as it doesn't require any changes other than the addition of a class; however if you wanted to avoid using jQuery, you could do something like this instead:

EXAMPLE HERE

html, body {
    height:100%;
    width:100%;
}
.autoheight {
    height:100%;
}