Home  >  Article  >  Web Front-end  >  How to implement css to always fix the footer at the bottom

How to implement css to always fix the footer at the bottom

王林
王林forward
2020-03-11 10:59:134688browse

How to implement css to always fix the footer at the bottom

Goal:

Fix the footer area at the bottom. No matter how wide the page is, it will always be at the bottom, just like the menu on the mobile side.

(Recommended tutorial: CSS introductory tutorial)

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>document</title>
 
<!-- css -->
<style>
#demo{
 position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: #eee;
    z-index: 9999;
}
</style>
 
</head>
<body>
<footer id="demo">我是footer</footer>
</body>
</html>

Recommended related video tutorial: css video tutorial

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

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete