Fitting all screen resolutions

[asif49]

Hi,

I'm developing a new website and wanted this to fit all screen resolutions type, so intuitively thought that eliminating the use of 'px' totally and using '%' to define dimensions would be better. Is this the right way to achieve what I'm trying to achieve?

The strangest thing I noticed whilst doing this was that by doing setting the height to 100% in the body { .. } section it starts showing the scrollbar even when the entire page is empty and that is the only styling which has been defined. What I'm aiming to achieve should make the height 100% mean the bottom of my screen and width 100% the width of it, so the scrollbar shouldn't be showing in this case.

Perhaps I'm thinking about it the wrong way and maybe javascript is needed to aide me in this. Can someone help?

[AleMonteiro]

Have you set margin, padding and border to 0? If you set the height/widht to 100% and have padding/margin the scroll will show.

This kind of stuff is very trick and browser compability doesn't help either.

I had the need to do a very sofisticated interface fit in a large number of screens, my solution was the use of a layout plugin: http://layout.jquery-dev.net/

[asif49]

Yes I have that stuff set to 0. It seems like for me margin-left: 97% and margin-top: 44% is where the element I want to place (some text) is to the far right of the screen at the bottom. If I increase either of these anymore then the scroll shows. My aim is to have the non-scroll page on all devices be used to put data on so I'm trying to create a div for this purpose however it seems very strange that these are the amounts which determine the entire page's width/height.

[AleMonteiro]

If the page will never have scroll, set overflow: hidden.

If you describe how the interface should look like, or, even better, post a example of the layout we can suggest better ideas.