Set Div Height Based On User Browser Height, Not Monitor

[ak-i]

I am not quite sure if this is the right place for this question, but I think it got to do with JS, so I’m asking for it here. This what I get so far. I’m really noob with JS, so bear the code

Code:

$(document).ready(function()
{
var browserHeight = $(window).height();

if(browserHeight < 725 && browserHeight >= 700)
{
document.getElementById(“paper-body”).style.height = 280+”px”;
document.getElementById(“post-content”).style.height = 230+”px”;
}
else if(browserHeight < 700 && browserHeight >= 600)
{
document.getElementById(“paper-body”).style.height = 250+”px”;
document.getElementById(“post-content”).style.height = 200+”px”;
}

else
{
document.getElementById(“paper-body”).style.height = 350+”px”;
document.getElementById(“post-content”).style.height = 300+”px”;
}
});

What I want it to do is to load a <div> in a specific height base on the current size of the browser height. I just put some number like 700, and 600 since I’m testing with my monitor (1440×900), so i don’t know what height should i specific with.

Thanks!

[jamygolden]

You could achieve the same thing with different stylesheets based on the browser size: http://css-tricks.com/resolution-specific-stylesheets/

[Author]

Posts