CSS + DIV let footer always bottom

Source:David ' s Blog http://www.DavidQiu.com/

Article Link: http://blog.davidqiu.com/post/2013-06-17/40051753968

Related references:

Http://www.cnblogs.com/chenyuming507950417/p/4003651.html

Http://www.cnblogs.com/ahjesus/archive/2011/11/26/2263986.html

Here's the original David blog

Bloggers studied for more than two days and finally used Css+div to make the footer always at the bottom of the page T T

1. Using the bottom attribute?

Before the practice, it is easy to associate with the CSS inside the bottom attribute to the bottom of the footer, but this is not feasible. If you use the following methods:

Footer {  bottom: 0px;}

I can honestly tell you that it's no different to write a root without writing it. Because the layout defaults to "position:relative;", this allows the layout to be arranged from top to bottom, rather than allowing footer to remain at the top of the page independently.

Position:fixed?

Then nature will want to say, if you use "position:fixed;" What about properties?

Footer {  position: fixed;   Bottom: 0px;}

This is also not possible, because "fixed" will make the div relative to the browser, not the page. Then the situation will be that no matter how to move the page, there is always a footer at the bottom of the browser, not very beautiful.

Position:absolute?

Then think again, if use "Position:absolute"?

Footer {  position: absolute;   Bottom: 0px;}

It's not going to work. With this attribute, there will be an initialization effect, let footer start at the bottom of the browser, and then you pull the page, it will not fall to the lowest part of the page, but up. is actually overlapping with the content of other Web pages. This is also absolutely not allowed.

2. Solution

At the time of the settlement, I looked up quite a lot of information. If you use pure CSS, it all seems to point to a method called Sticky footer. But the basic online is copied to copy, only the code, no explanation of what, I will not spit noisy.

Principle Analysis

The principle of this method is simple, with 2 attributes: Min-height and margin.

Among them, Min-height has a very peculiar attribute value: 100%. This property value refers to the height of the current browser window, which is actually the maximum height that can be displayed (the height of a screen). Naturally, it can be thought that if the content part is set to "min-height:100%", the content portion will be able to occupy a screen height, then the footer will be at least on the outside of the screen. With a little improvement, you can fit into the Header, content, Footer three parts, and make Footer at least at the bottom of the screen, and when the content length increases, will be on the last side of the page, rather than blocking the content.

Note, however, that this property of "100%" is a bit odd for "height" or "min-height", which seems to initialize the definition of "100%" before it is used. And we know that the "HTML" node is stained with a screen, it is necessary to write such content first:

Body, HTML {  height: 100%;}

One notable concern is that if we are using the ASP. NET Framework because it is based on form, it is not enough to set the body and HTML, but also to set the corresponding properties of the form :

form {  height: 100%;}

For the header and footer close to the browser border, we also set the relevant margin and padding to 0 to prevent the appearance of voids. And for the sake of simplicity, set such a default value for all containers globally.

* {  margin: 0;   padding: 0;}

Well, when you get here, you can safely use "min-height:100%;" The

So how do you solve it when the content is very small, the footer can be displayed at the bottom of the browser, instead of what is placed outside the height of a screen?

Probably see the 2nd above I said to use the attribute, we probably understand. Yes, this is the property of margin. One thing to declare, however, is that the following method uses some less conforming methods, which is to add an empty div as a display format customization, which does not have any effect on its own.

First look at the HTML text of the page to see the framework:

<div class= "Wrapper" >  <div class= "Header" ></div>  <div class= "Content" ></div >  <div class= "Footerpush" ></div></div><div class= "Footer" ></div>

It can be seen that the header and content are wrapped in a container called "Wrapper", and then there is a "footerpush" behind them, and this is what I said earlier only to control the display format of the empty Div. Then, Footer is placed outside of all content.

Then we think: if the height of the Footerpush is the same as the Footer, then Footer has a property of "Margin-top", and its value is negative for Footer height, i.e. Footer height is 120px, then:

. Wrapper. Footerpush{  height: 120px;}                            . Footer{  margin-top: -120px;   Height: 120px;}

Then the situation will be very magical, in fact, Footer is just covering the top of the Footerpush. So at this point, we just set the height of the Wrapper to "100%" so that everything can be done in one screen at least.

In this way, the Footer can be displayed at the very bottom of a screen when the content is short, and when the content is longer, Footer can be very clever at the back of all content, rather than blocking the content.

OK, the Gaocheng of the workpiece! Then I'll put a complete code on it.

Full code

Html:

<Body><form> <!--If you're using ASP, you might have this node. -  <Divclass= "Wrapper">    <Divclass= "Header"></Div>    <Divclass= "Content"></Div>    <Divclass= "Footerpush"></Div>  </Div>  <Divclass= "Footer"></Div></form></Body>

Css

*{margin:0;padding:0;}HTML, body, form{Height:100%;}   . Wrapper{Min-height:100%;}     . Wrapper. Footerpush{Height:120px;/*the height of the Footer*/}   . Footer{Clear:both;/*clear Floating element format*/position:relative;Margin-top:-120px;/*negative value of Footer height*/Height:120px;}

By:david Qiu.

Thanks again to the author of the original. In this collection, just take notes.

CSS + DIV let footer always bottom