CSS implementation Absolute Bottom

The simple CSS is that it is easy to learn, the difficulty of CSS is to find a better solution. In the world of CSS, there seems to be no perfect this argument. So, now the introduction of the absolute bottom of the CSS, but the current individual has seen the scheme is relatively perfect bar.

Let's start by saying why we use this CSS bottom layout solution:

As a page, if the page content is small, not enough to fill a screen of the window area, according to the normal layout, will appear in the image below (that is, the bottom of the content is not located at the bottom of the window, leaving a lot of blank.

　　

For the imperfect designers, this is not beautiful. There are some solutions on the web, but there are bugs that overlap the bottom and body when changing the height of the window. Although not many people will have nothing to change the height of the window, but the design, the pursuit is perfect.

　　

Below is I found a more perfect method, from the design of the people from abroad, pure CSS, you can achieve: when the body content is very small, the bottom is in the window below. When you change the height of the window, there is no overlap problem.

　　

Even the person who created the CSS specifically set up a website to introduce this CSS bottom layout scheme. Do not know if he has to apply for a patent:)

HTML code:

<div id= "Wrap" >
<div id= "main" class= "Clearfix" >
<div id= "Content" >
</div>
<div id= "Side" >
</div>
</div>
</div>
<div id= "Footer" >
</div>

Description: The premise of using this layout is footer to use a layer outside the total div container, and all other content uses a total layer. Footer If you do need to add other sibling layers, then this sibling layer must use Position:absolute for absolute positioning.