Detailed explanation of how the footer is always at the bottom of the web page-HTML Tutorial-php.cn

Detailed explanation of how the footer is always at the bottom of the web page

高洛峰

Release： 2017-03-20 13:38:08

Original

2241 people have browsed it

Last time I said that the header and tail of the web page should be separated into a separate file and shared by all web pages. This is more convenient for modification. However, I found that in some methods, the tail will follow the head immediately. The content is squeezed below. . Moreover, if the content of some pages is small, the tail cannot be squeezed to the bottom. Therefore, this time we will study how to keep the tail at the bottom. .

First put out the html code:

<body>
<div class="header">头部</div>

<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />

同上，以下省略N行。。。
</div>

<div class="footer">尾部</div>
</body>

Copy after login

Method one: In fact, this method should always be located at the bottom of the browser window, not at the bottom of the web page. Just like when browsing some web pages, there is always a line of prompt information below when you are not logged in or registered, which is probably the same as the back to top button. .

Last picture: It looks like this

Detailed explanation of how the footer is always at the bottom of the web page

CSS code:

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

Copy after login

Need to set a fixed height for the footer

Method 2: This is the method to place the footer at the bottom of the web page. Fixed footer height +Absolute positioning

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

Copy after login

Add padding- in the middle content part The bottom is to allow the content to be fully displayed without being covered by the footer. At the same time, a fixed height must be set for the footer.

Method 3: Fixed footer height+margin Negative values

html code is different:

content

content

content

Content

Same as above, but N lines are omitted below. . .

CSS code:

body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}

Copy after login

Add padding-bottom to the content as above

Attachment:

When there is less content:

When there is a lot of content:

Detailed explanation of how the footer is always at the bottom of the web page

The above is the detailed content of Detailed explanation of how the footer is always at the bottom of the web page. For more information, please follow other related articles on the PHP Chinese website!