Create a masterpage that fits any screen resolution

Question

I have created a masterpage and I want the ASP.NET pages attached to it to fit any screen resolution. Its a html tables based design.

I read that if you keep tables width and height to 100% then it should fit to any resolution. I have done the same thing, it adjusts its width to any screen resolution but not height. We see a blank space at the bottom for heigher screen resolutions and creates a scroll bar for lower screen resolutions.

Anyone has any idea how to fix this issue?

Answer 1

I think if you want height, you have to use javascript.

var myHeight = 460;
if (document.body && document.body.offsetWidth) {
 myHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 myHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 myHeight = window.innerHeight;
}

After that, you can style your outer div's height

var myDiv = document.getElementById('myDiv'); 
myDiv.style.height = myHeight + 'px';