CSS elastic fluid layout meets different content display

Today, as users' monitors are getting larger and larger, the previous 1024*768 solid-width layout is becoming more and more outdated. For users with large screens, the empty space on both sides gives people a serious impression at 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 this waste of screen, using elastic fluid layout is the best solution. It can make full use of screen space and display content on the full screen no matter what resolution you are. However, due to various limitations, current web pages are not yet ready to fully adopt fluid elastic layout (especially browser manufacturers' wanton trampling of standards and incomplete support for CSS standards, etc.). As a middleman between users and manufacturers, we can only adapt to the gap between the two with a compatible mentality. Therefore, as a transitional solution, there is such a layout: elastic + fixed width layout.

The elasticity mentioned here means that the background adapts to the screen width, while the fixed width means that the text content can be automatically centered in either widescreen or narrowscreen. Survive in the cracks to meet the needs of users with different size resolutions. The design shown below is a typical example.

Without further ado, let’s get down to business. Let’s create a layout structure like this.

First build the structure layer:

Analyze the structural layer. A web page generally includes three parts: header, content area and footer. We put the header and content in a container layer, named wrapper, and separate the footer, named wrapper. It's called footer. Why is it designed like this? We want this footer to be absolutely at the bottom even when the content area is less than one screen.

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

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

In this way, the main text of the page header floats on the upper layer of haeader. These two layers can be set with different background images to form an overlay header effect, which can automatically adapt Larger screen resolution.

In the same way, the footer can also be implemented using this method.

In the structural layer above, I did not use this method in the middle content area, but made a little change. We can see that in the content area, there is no embedded container, but only one container. What should we do if we want to prevent the two sides of the text from appearing empty at high resolution? Of course, you can use the header and footer methods and add a div to its content. Of course, in order to reduce nesting, we can use workarounds. We can add a very large picture to the background of the body and use background-position to position and center the picture so that the pictures on both sides of the content area are displayed.

This blog is a specific case. If you look at the pictures on both sides of this blog at a high resolution and then shrink the window, you can see that only a small area of ​​the pictures on both sides is displayed at 1024*768, while the main text is always displayed in the center. .

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