CSS design for Web page elastic fluid Layout

The biggest advantage of elastic layout is that it can make full use of screen space. can automatically adapt to changes in width regardless of client resolution

The biggest advantage of elastic layout is that it can make full use of screen space. No matter how large the client resolution, can automatically adapt to the change in width.

Figure I

Look at this picture above, this is a foreign site, it is a fixed-width layout, our layout is based on this picture to explain. Of course, I will not fully introduce how to make this complete page, I only focus on the explanation.

In fact, to do a flexible layout, relatively simple, but this layout is simple, but for the details of the grasp is the essence of this layout. Although the elastic layout has such good advantages, but there are more fatal defects:

1. If you do not set a minimum width for this layout, when the user shrinks the window to enough hours, it can have a fatal effect on the layout. Cause serious impact on layout dislocation.

2. When a page is flexible layout, it will have a huge impact on the picture inside. As of now, there is no solution to the problem of scaling the picture with percent.

So this article on the layout of the explanation may be relatively less, and more is to solve the above two problems, I believe that as long as the two problems solved above, this layout is relatively easy.

First, to solve the minimum width

General elastic layouts use percentages to set the width of a container. This will automatically adjust to the width of the screen. But the width value cannot be completely freely scaled by the user, we must limit its minimum width in this percentage width, and when the user shrinks the window to a certain value, it does not allow the window to scale again.

Friends who are familiar with CSS know that there are four attributes:

Min-width: Min width

Max-width: Max width

Min-height: Minimum Height

Max-height: Maximum Height

These four properties just can solve this problem, is not quite happy, but, do not busy, although they can solve this problem, but there is a serious problem, the user use the most browser IE6 but not support these attributes, this is a very bad thing. We can not discard the most users of the browser bar!

At present, there are four methods that are popular online to solve the IE6 support for these four kinds of properties:

1. In the CSS expression to set the minimum width, compare the cost of memory.

2. With nested Div, and then with margin offset simulation implementation, multiple redundancy structure.

3. Implement with JQ framework, add a JS frame for a property, it is not worth a bit.

4. With pure JS code to achieve.

The first three kinds of disadvantage, please choose the most appropriate method, I prefer the last one, this is a foreign cow to achieve, the relevant examples can be seen here:http://www.doxdesk.com/software/js/minmax.html

With this JS file, you just need to call this JS file on the head.

PS: In the demo model for convenience, I will this JS as an internal reference way to call, you in the actual application of this JS file new to a JS external file, the following way to call:

<script type= "Text/javascript" src= "Minmax.js" ></script>

We're going to apply min-width to the #wrapper and #footer containers in the stylesheet, and we set them to 100%,ok, and now we've solved the problem of the minimum width.

Second, to solve the elastic picture

We look at the above picture, to make a flexible layout, we need to solve the page header picture dynamic scaling. And this is a picture, we all know the picture is no way to scale with the scale, how to do?

We can change a way of thinking, this picture in PS to make a little change, we can divide this picture into the left and right parts, and merge them into a picture. As shown in the following illustration:

Figure II

The first picture is positioned on the left side of the container in a background position, and the second piece is positioned under the right, with two containers divided two pictures, the inner layer of the picture level than the outer image level, it will float to the first picture covered it, of course, this second to make transparent background of the PNG or GIF picture, Because png-24 bit transparent picture is not supported under IE6, so we change to PNG-8 bit of transparent picture, so although the picture quality has a little influence, but can guarantee in IE6 unimpeded.

So the structure layer of the page header should look like the following:

--><div id= "Header" >
<div id= "Inhead" >
<p> Page Header Content </p>
</div>
</div>

For such a structure we can write the following styles:

Outer style:

-->#header {
height:150px;
width:100%;
Background: #000 URL (image/header-bg.png) no-repeat left top;
}

Inner layer Style:

-->#inhead {
height:150px;
width:100%;
Background:url (image/header-bg.png) no-repeat right bottom;
Text-align:center;
Color: #fff;
}

After this improvement, our header is made into a flexible picture, which should be displayed in the browser as follows:

Figure three

In this way, a flexible layout even if the basic completion. The final effect is shown in the following illustration:

Figure Four

Postscript:

Finally, the layout is limited, and not every Web page is suitable for layout in this way. Because the fluid elasticity layout itself exists the flaw. It can not be used in the design of too gorgeous, picture rich pages, because some pictures are not able to do as the above figure which telescopic. I think it is for this reason that it limits the spread of this layout.

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]