CSS implements bottom fixation_html/css_WEB-ITnose

There is a phenomenon when making pages: when an HTML page contains less content, the "footer" part of the Web page floats up and is in the middle of the page. It has a great impact on the visual effects and makes your page look ugly, especially now that there are more and more widescreens, this phenomenon is even more common.

So how to fix the "footer" part of the web page to the bottom of the page forever? Note that what is said here is that the footer is always fixed at the bottom of the page, rather than always fixed at the bottom of the monitor screen,

In other words, when the content is only a little bit , the Web page is displayed at the bottom of the browser. When the content height exceeds the browser height, the footer part of the Web page is at the bottom of the page. In short, the footer part of the Web page is always at the bottom of the page. In other words, the Footer part is always at the bottom of the page. Sinking to the bottom.

Method:

1. HTML structure:

<div id="container">    <div id="header">Header Section</div>        <div id="page" class="clearfix"> 页面容容部分 </div>    <div id="footer">Footer Section</div></div>

To achieve this footer that is always fixed at the bottom of the page, we only need four div, where div#container is a container. In this container, we include div#header (header), div#page (main part of the page), div#footer (footer part)

2. CSS code:

html,body { margin: 0; padding:0; height: 100%;} #container { min-height:100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ position: relative;} #header { background: #ff0; padding: 10px;} #page { width: 960px; margin: 0 auto; padding-bottom: 60px;/*等于footer的高度*/} #footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*脚部的高度*/ background: #6cf; clear:both;}

Principle:

1. and tags: html and The height in the body tag must be set to "100%", so that we can set the percentage height on the container. At the same time, we need to remove the margin and padding of html and body, that is, the margin and padding of html and body. All are 0;
2. div#container container: div#container container must set a minimum height (min-height) of 100%; this mainly makes it less (or no) content Content), can maintain 100% height. In addition, we also need to set a "position:relative" in the div#container container so that the elements inside will not run out of the div#container container after absolute positioning;
3. div#page container: The container div#page has a very critical setting. You need to set a padding-bottom value on this container, and this value must be equal to (or slightly greater than) the height value of the footer div#footer;
4. div#footer container: div#footer container must be set to a fixed height. div#footer also needs to be absolutely positioned and set bottom:0; let div#footer be fixed at the bottom of the container div#container, so that the effect we mentioned earlier can be achieved. When the content is only one point, div# The footer is fixed at the bottom of the screen (because div#container sets a min-height:100%). When the content height exceeds the height of the screen, div#footer is also fixed at the bottom of div#container, that is, fixed at the bottom of the page. You can also add a "width:100%" to div#footer to extend it across the entire page;
5. Other divs: As for other containers, you can customize it according to your own needs Need to be set, such as the previous div#header, div#left, div#content, div#right, etc.