Full Screen Page Width

The page does not has a fixed width, but fills all the screen of the browser, no matter what the current browser display resolution is. The contents of the page also does not has a fixed width either. We usually use width="XX%" to give it a relative width.

 

A example of this pattern is www.amazon.com

 

 

In this case, the user will see the page in full screen, no matter what the resolution of his browser is.

 

Pros:

1. The user see the page in full screen, the visual effects would be better. Even if in small resolution browser, the page can still display with no horizontal scrool bar.

2. The user can take advantage of high resolution screen to display the page in a good effect.

 

Cons:

1. The visual effect varies in browsers with different resolution, since the actual display width is calculated according to the browser resolution.

2. Implementation is more difficult and costs more. Because the container elements' width is undetermined, it's relatively harder to layout the content in it.

 

Implementation:

 

width: xx%;

We give a width to the element, and its width would be calculated from the container's width.

Those block elements (p, div, h, dl etc.) will fill all the width of the container.

 

Notes:

1. Even in Full Screen Page, we can still have fixed pixel width elements.

2. For Full Screen Page, we usually set a min width for the page. We can give a div to wrap all the page and apply the css to this div. If the resolution is less that the given min-width, then the page will display with a horizontal scroll bar and the give width.

min-width:980px;

 

 

Related Patterns:

Fixed Pixels Page Width