Discussion on elasticity and fixed-width layout

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

In today's more and more users of the display, before the 1024x768 fixed-width layout is a bit more and more outdated, for large screen users, the two sides empty left for the first impression is a serious screen waste, as a web designer you have the responsibility to this group of users a good user interface.

Of course, in order to reduce the waste of this screen, the use of flexible fluid layout is the best solution, it can make full use of screen space, no matter how much you are the resolution of users, can enjoy full screen display content. However, due to various restrictions, the current Web page full use of fluid elastic layout conditions are not available (especially browser manufacturers on the wanton abuse of standards and CSS standards are not fully supported, etc.). As the intermediary between the user and the manufacturer, we can only adapt to the gap in a compatible mindset. So, as a transition solution, there is a layout: Elastic + fixed-width layout.

This is said to be flexible, refers to the background to adapt to the screen width, and fixed width, it is to make the body content in both widescreen or narrow screen can automatically center. To survive in the gap to meet the needs of different size resolution users. The design shown in the following figure is a typical example.

Figure I

Let's talk less, and we'll make a layout like this:

First build the structure layer:

<div id= "Wrappers" >
<div id= "main" class= "Clearfix" >
<div id= "Header" >
<div id= "Inheader" ></div>
</div>
<div id= "Content" ></div>
</div>
</div>
<div id= "Footer" >
<div id= "Infoot" ></div>
</div>

Analysis of the structure layer, a page generally includes the page header, content area and footer three parts, we put the page header and content in a container layer, named wrappers, and will be independent of the footer, named footer, why this design, We want this footer to be absolutely at the bottom of a screen in the content area. Its concrete realization principle may refer to this article: "CSS Sticky Footer: Perfect css absolute bottom".

We'll set the wrappers and footer two containers 100% wide so that it automatically adapts to the width of the screen. Also set the header header area to 100% width. This allows us to insert a picture 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 under the large screen.

As the body content, our general practice is, when the resolution becomes larger, let it center, left blank on both sides. Because the page header area is already set to 100% width, we add a container layer Inheader to the header, which serves as the carrier for the true header text, and we give it a fixed width value, such as 960 pixel width, and then let it center automatically.

#inheader {width:960px;height:110px; margin:0 auto;}

So that the body of the header floats the upper layer of the haeader, these two layers can be set to a different background picture, forming an overlay of the page head effect, it can automatically adapt to a larger screen resolution.

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

In the above structure layer, I did not use this method in the middle content area, but did a little bit of work, we can see in the content area, there is no embedded container, and only a container. If we want to make the content of the two sides in the large resolution on both sides does not appear too hollow, how to do it, of course, you can use the head and footer of the practice, in its content and add a div. Of course, in order to reduce nesting, we can adopt a flexible approach. We can add an oversized picture to the background of the body and use background-position to position the image in the center, so that the picture on both sides of the content area is displayed.

This blog is a specific case, in the large resolution to look at the two sides of the blog picture, and then narrow the window, you can see the two sides of the picture in the 1024x768 only a small block, and the body content is always centered.

To demonstrate the effect, let's add some other color tuning, and the final style looks like this:

*{margin:0;padding:0;


html, body, #wrapper {height:100%;font-size:12px}


#wrapper {width:100%;background: #777;}


Body &gt; #wrapper {height:auto min-height:100%;}


#main {padding-bottom:54px;min-width:960px} /* must use the same height as the footer, the minimum width IE6 add JS to solve the * * *


#header {text-align:center;color: #fff; background: #333;}


#inheader {width:960px;height:110px;line-height:110px;margin:0 auto;background: #CC9933;}


h3{font-size:14px;line-height:50px}


#inheader p{font-size:12px;line-height:30px;}


#footer {


position:relative;


margin-top: -54px; /* Footer Height Negative/


height:54px;/* Footer Height * *


width:100%;


min-width:960px;/* Minimum width ie6 add JS to solve * * *


Clear:both;


background: #666;


Text-align:center;


color: #fff;


    }


#infoot {height:54px;line-height:54px;width:960px;margin:0 auto;background: #CC9966;}


#footer p{line-height:26px;}


#content {background: #999; width:960px;margin:0 auto;height:692px;}


#content p{line-height:30px;padding:0 30px;color: #fff;


/* Description: Note that #main padding value, footer height and negative margin value need to be kept in line. Here is the famous universal float closed Clearfix hack*/


Clearfix:after {


content: ".";


Display:block;


height:0;


Clear:both;


Visibility:hidden;


. clearfix {display:inline-block;}


/* Hides from Ie-mac \*/


* html. Clearfix {height:1%}


. clearfix {display:block;}


/* End Hide from Ie-mac * *

Test Demo:

Run Code Box


&nbsp;&nbsp;&nbsp; &lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;&lt;html xmlns=" http://www.w3.org/1999/xhtml "&gt;&lt;head&gt;&lt;meta http-equiv=" Content-type "content=" html; Charset=utf-8 "/&gt;&lt;title&gt; Elastic + solid width layout design &lt;/title&gt;&lt;link href=" Css/main.css "rel=" stylesheet "type=" text/ CSS "/&gt;&lt;style type=" Text/css &gt;/* This example applies to a footer container that is permanently docked to the footer, which is independent of the main content area. */*{margin:0;padding:0. HTML, body, #wrapper {height:100%;font-size:12px} #wrapper {width:100%;background: #777;} Body &gt; #wrapper {height:auto; min-height:100%;} #main {padding-bottom:54px;min-width:960px;} /* must use the same height as the footer, the minimum width IE6 add JS to resolve * * * #header {text-align:center;color: #fff; background: #333;} #inheader {width:960px;height:110px;line-height:110px;margin:0 auto;background: #CC9933;} h3{font-size:14px;line-height:50px; #inheader p{font-size:12px;line-height:30px;} #footer {position:relative;margin-top: -54px/* Footer height negative */height:54px;/* fOoter height */width:100%;min-width:960px;/* min width ie6 add js to solve */clear:both;background: #666; Text-align:center;color: #fff;} #infoot {height:54px;line-height:54px;width:960px;margin:0 auto;background: #CC9966;} #footer p{line-height:26px;} #content {background: #999; width:960px;margin:0 auto;height:692px;} #content p{line-height:30px;padding:0 30px;color: #fff; /* Description: Note that #main padding value, footer height and negative margin value need to be kept in line. Below is the famous universal float closed Clearfix Hack*/.clearfix:after {content: "."; Display:block;height:0;clear:both;visibility:hidden. Clearfix {Display:inline-block} /* Hides from Ie-mac \*/* html. clearfix {height:1%;}. Clearfix {Display:block} /* End hide from Ie-mac */&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id= "wrappers" &gt;&lt;div id= "main" class= " Clearfix "&gt;&lt;div id= Header" &gt;&lt;div id= "Inheader" &gt;&lt;h3&gt; elastic + solid-width layout design (suitable for widescreen and large background layouts) &lt;/h3&gt;&lt;p&gt; The page header background can be tiled across the browser width, while the body content is always centered, regardless of the resolution. &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id= "Content" &gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt; body background can be tiled throughout the browsingThe width of the device, you can add a large background picture in the body, and set the picture to center. The text content is always centered, no matter how large the resolution is. When you have a resolution of more than 1024, the contents of the body will appear on both sides of the picture, so that the contents of the widescreen area on both sides do not appear empty. &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id= "Footer" &gt;&lt;div id= "Infoot" &gt;&lt;p&gt; I am floating always fixed at the bottom of the Div, regardless of the middle of the text content height is not enough to a screen, I can still display,&lt;/p&gt;&lt;p&gt; when the middle content over a screen, I can float yo &lt;/p&gt;&lt;/div&gt;&lt;/ Div&gt;&lt;/body&gt;&lt;/html&gt;


[Ctrl + a ALL SELECT hint: You can modify part of the code first, then run]

Article from: www.cn8f.com