How to resize the web page automatically based on user's web browser screen resolution?

You can set the Parent Div's width to 100 % so it will fit to different resolutions.

Other option can be using Media Queries.

multiple-media-queries-for-different-screen-sizes[^]

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/[^]

http://htmldog.com/guides/css/advanced/mediaqueries/[^]

Just use percentage based layouts rather than pixels or other measurements.
<img width="50%">: that will fill half of the screen, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.


It is also theoretically possible to design a website using pixels and adjust it using Javascript to scale, but that is the same as using percentages (in how it looks) and MUCH harder to do. It also is unreliable. Basically, a good web designer won't need to do that.

<script type="text/javascript">
function TableHeight()
{
if (typeof (window.innerWidth) == 'number')
{
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight))
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
document.getElementById('ctl00_TopPanel').style.height = (myHeight - 140) + 'px';
}
</script>

Used above code for solving problem
Used id of my form in place of ctl00_TopPanel'.