Web page layout plan: elastic fluid layout

In another article in my article "Elastic + Fixed Width Layout", I introduced a layout plan with elastic plus the minimum fixed width, and now I will introduce another layout plan - Elastic fluid layout.

That solution is actually a flexible application of this layout. The biggest advantage of elastic layout is that it can make full use of screen space. No matter how large the client resolution is, it can automatically adapt to the changes in width.

Picture 1

Take a look at the picture above. This is a foreign website. It is a fixed-width layout. Our layout is based on this picture. Of course, I will not give a comprehensive introduction to how to make this complete page, I will only explain it to the key points.

In fact, it is relatively simple to make an elastic layout, but although this layout is simple, the grasp of details is the essence of this layout. Although elastic layout has such good advantages, it has relatively fatal flaws:

1. If you do not set a minimum width for this layout, it will have a fatal impact on the layout when the user shrinks the window to a sufficiently small one. Causes serious impact on layout misalignment.
2. When a page is laid out elastically, it will have a huge impact on the pictures inside. Because so far, the problem of image scaling with percentage has not been solved.

   Therefore, this article may have relatively less explanations on layout, and it is more about solving the above two problems. I believe that as long as the above two problems are solved, this layout will be relatively easier.

Generally, elastic layouts use percentages to set the width of a container. This will automatically adapt to the width of the screen. However, the width value cannot be completely freely scaled by the user. We must limit its minimum width in this percentage width. When the user shrinks the window to a certain value, the window will not be scaled again.

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

• min-width: Minimum width
• max-width: Maximum width
• min-height: Minimum height
• max-height:maximum height

These four attributes just can solve this problem. Are you happy? But don’t be busy. Although they can solve this problem, there is a serious problem. The browser ie6, which is the most used by users, does not support these attributes. This is a very bad thing. We can't discard the browser with the most users!

There are four popular methods on the Internet to solve the problem that ie6 supports these four attributes:

1. Expression in css to set the minimum width, which costs more memory.
2. Use nested divs and then use margin offset imitation to implement, multi-redundant structure.
3. Implemented with jq framework and adding a js framework to a property is a bit unprofitable.
4. Implemented with pure js code.

The first three have disadvantages, please choose the most suitable method. I prefer the last one. This is achieved by a great foreigner. You can see the relevant examples here: http://www.doxdesk.com/software/js/minmax.html

With this js file, you only need to call this js file in the header.

ps: For convenience in the demonstration model, I call this js as an internal reference. In actual application, you will create this js file into a js external file, and call it as follows:

<script type=text/javascript src=minmax.js></script>

We just apply min-width to the two containers #wrapper and #footer in the style sheet, and set their width to 100% respectively. OK. Now we have solved the problem of minimum width.