CODEWITHSUNDEEP
asp.nethtmlcssmaster-pages
Abdullah
Abdullah

Reputation: 307

Create a masterpage that fits any screen resolution

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?

Upvotes: 5

Views: 7656

Answers (4)

dougajmcdonald
dougajmcdonald

Reputation: 20047

It might be worth adding to aid understanding that in the example you've described the 100% height property will be relative to the content, in that, the height of the element will expand and contract to fit whatever you choose to insert, as UGS has said.

You could, if you wish to minimise the amount of occurances where the height is too small, use the 'min-height' property and define this in pixels. If for example you knew your minimum desired height of intended target devices was 320px, you could set 'min-height: 320px' to ensure that on your smallest devices you wouldn't see any space below.

Upvotes: 1

Chains
Chains

Reputation: 13157

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';

Upvotes: 2

casper123
casper123

Reputation: 1766

Intstead of table based page you should go for DIV based pages.. Its generally easy to create and handle. As far as height is concerned, u shouldn't be worried about it as height may increase with the content.. Personally, whenever I want to go with full width, I break my HTML in three parts..

  1. Header
  2. Main Content
  3. Footer

I keep eader and footer div to full body width while Main Content is normally 900px wide.. I gives nice clean effect of full width page :)

hope it helps :)

Upvotes: 1

Augiwan
Augiwan

Reputation: 2482

What most developers want to fix is the width. The height is not a problem. You'll never know what resolutions people use. Trust me, this is a BIG ISSUE by itself.

So, i recommend you to fix the width and sit back :D

Upvotes: 1

Related Questions