How to fix the footer to the bottom with css

Css method to fix the footer at the bottom: First ensure that the html, body, and container in the page meet [height:100%]; then use relative positioning [bottom:0] to fix the footer at the bottom of the page. Can.

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

Principle analysis:

(Learning video sharing: css video tutorial)

The html, body, and container in the page must all meet height:100%, so that it can occupy the entire screen (page). The footer uses relative positioning bottom:0 and is fixed at the bottom of the page. The main page container must set a padding-bottom that is greater than or equal to the height of the footer. The purpose is to The height of the footer is calculated in the page container, so that the footer will always be fixed at the bottom of the page.

Implementation:

HTML

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left Sidebar</div>
        <div id="content">Main content</div>
        <div id="right">Right sidebar</div>
    </div>
    <div id="footer">Footer Section</div>
</div>

The only thing to note here is that the footer container is included in the container container.

CSS

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;
}
/*=======主体内容部分省略=======*/

From the css code, we see that the page body page has a padding-bottom set, and it is consistent with the height of the footer. Margin-bottom cannot be used here instead of padding-bottom.

This solution has a disadvantage: footer must have a fixed height, and page must set a padding-bottom greater than or equal to this height. If the footer is not of fixed height, or the footer needs to be adapted, then this solution is not suitable.

Related recommendations: CSS tutorial

The above is the detailed content of How to fix the footer to the bottom with css. For more information, please follow other related articles on the PHP Chinese website!