Home >Web Front-end >CSS Tutorial >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:134720browse

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!

css

Statement：

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

Previous article：How to handle spaces in cssNext article：How to handle spaces in css

See more

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

Related articles