[Transfer] Use DIV CSS to keep the footer at the bottom_html/css_WEB-ITnose

How to position the footer of a website with css (use DIV CSS to keep the footer at the bottom)
I usually use CSS layout for websites with a lot of content. Two days ago, I used CSS DIV to create a website with less content. Page, I found a small problem that everyone may encounter, that is, the positioning of the website FOOTER. If the content is relatively small, the FOOTER of the page will move to the top as the content decreases, instead of staying at the bottom obediently. It took me a long time to research and find an expert to finally figure it out. It’s a little trick to share with everyone

First we need to set a DIV in the outer layer (content ) <---The name can be defined as you like. ,), let the height of this DIV be equal to the height of the browser, then set the footer DIV as a sub-DIV of the content, and use absolute positioning to fix it to the bottom of the content; this is the general idea,

Here is how to do it:

                                                                           main & lt;/h1 & gt;
& lt; p & gt; you can change the height of the browser window to observe the effect of the Footer.

                                                                                         ​ >
                                                                            >
Then we write the CSS:

Body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {

min-height:100%;

position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px; /* 20px(font-size)x2( line-height) 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background- color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}


First, set the HEIGHT attribute of HTML and BODY to 100%; ensure that the height of the content can fill the browser;

Then set the height of #content to 100%. 100%, but here we use the "min-height" attribute instead of the height attribute. This is because if the content in #main is increased and its height exceeds the height of the browser window, then if #content is The height is still 100%, which will cause #footer to still be positioned at the lower end of the browser window, thus covering the content in #content.

The purpose of using the min-height attribute is to make the height of #content "at least" the height of the browser window. When the content inside it increases, its height will also increase. This This is the effect we need.

Next, set #content to relative positioning, in order to make it the positioning reference for #footer inside it

Then set #foooter to absolute positioning and stick it on The bottom of #main.

But please note that if we paste #footer at the bottom of #content, it will actually overlap with the #main div above. In order to avoid covering the content in #main, we add Set the padding on the lower side in #main so that the value of padding-bottom is equal to the height of #footer, which can ensure that the text of #main is avoided.

?