Preface: When you want to keep the footer at the bottom of the page (even if the page content height is lower than the window height), you can try the following method..
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>CSS让footer保持在页面底部</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; /*让页面撑满窗口*/ } .body { min-height: 100%; height: auto !important; height: 100%; /*设置页面内容区域最小占满窗口高度*/ margin: 0 0 -41px; /*利用margin负值留出footer的区域(由于footer设置了1px的border，所以值在原有高度上+1)*/ text-align: center; } footer { height: 40px; line-height: 40px; border-top: 1px solid #ddd; text-align: center; } </style></head><body> <div class="body"> <header>我是头部</header> <div>我是内容</div> </div> <footer>我是页脚，我总是固定在页面底部</footer></body></html>
Author: @zhnoah
Source:
The copyright of this article belongs to myself and the blog park. You are welcome to reprint it, but it must be reproduced without the consent of the author. Keep this statement and provide a link to the original text
in a prominent position on the article page, otherwise we reserve the right to pursue legal liability.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
