CSS elastic fluid layout meets different content display

Today, when users' monitors are getting bigger and bigger, the previous 1024*768 solid width layout is becoming more and more out of place. For users with large screens, the empty blank on both sides gives people a serious impression of the first glance. Screen waste, as a web designer, you have the responsibility to give this group of users a good user interface.

Of course, in order to reduce the waste of this kind of screen, adopting elastic fluid layout is the best solution. It can make full use of screen space and display content on the full screen no matter how large the resolution you are. However, due to various restrictions, the current web pages are not fully equipped with the conditions for fully adopting fluid elastic layout (especially the unscrupulous destruction of the standards by browser manufacturers and the incomplete support of the CSS standards, etc.). As the middlemen between users and manufacturers, we can only adapt to the gap between the two with a compatible attitude. So, as a transitional solution, there is such a layout: elastic + solid width layout.

The elasticity mentioned here refers to the background adapting to the screen width, while the solid width means that the main content can be automatically centered in both wide screen and narrow screen. Survive in the gap to meet the needs of users with different sizes and resolutions. The design shown in the figure below is a typical example.

Let’s talk less nonsense and get back to the point, let’s create such a layout structure.

First build the structural layer:

Let’s analyze the structure layer. A web page generally includes three parts: the header, the content area and the footer. We place the header and content in a container layer, named wrapper, and separate the footer and named footer. Why do we need to design this way? We want this footer to be absolutely at the bottom if the content area is less than one screen.

We set the wrapper and footer containers to 100% width to automatically adapt to the width of the screen. And also set the header header area to 100% width. In this way, we can insert a horizontally tiled image into the header and footer, so that the background of the header and footer can horizontally fill the entire screen space under the large screen.

As the main content, our general approach is to let it center and leave blanks on both sides when the resolution becomes larger. Because the header area has been set to 100% width, we add a container layer inheader to the header, which serves as the carrier of the real header text content. We set it a fixed width value, such as 960 pixels Width, and then let it center automatically.

In this way, the text of the header floats the upper layer of the haeader. These two layers can set different background images to form an overlayed header effect, which can automatically adapt to a larger screen resolution.

By the same token, the footer can also be implemented in this way.

In the above structure layer, I did not use this method in the middle content area, but made a little workaround. We can see that in the content area of ​​content, there is no container embedded, but only one container. What should we do if we do not appear too hollow on both sides of the text under large resolution? Of course, you can use the header and footer method and add a div to its content. Of course, in order to reduce nesting, we can adopt workarounds. We can add an oversized image to the background in the body and use background-position to position the image in the center, so that the pictures on both sides of the content area will be displayed.

This blog is a specific case. With a large resolution, look at the pictures on both sides of this blog, and then narrow the window, you can see that only a small piece of the pictures on both sides are displayed at 1024*768, and the content of the text is always displayed in the center. .

To demonstrate the effect, we add some other color adjustments, and the final style is as follows: