如何将Footer固定在页面底部 - CSS技巧 - 常规

{"title":"如何将Footer固定在页面底部 - CSS技巧","description":"本指南解释了使用CSS将网站页脚（footer）固定在页面底部的方法，并提供了示例代码。","keywords":"footer, 底部, 固定, 页脚, CSS, 页面布局","content":"要将footer设置为位于底部，可以使用CSS来实现。以下是一种常见的方法：\n\nHTML:\n\n<body>\n <header>...</header>\n \n <main>...</main>\n \n <footer>...</footer>\n</body>\n\n\nCSS:\n\nbody {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nmain {\n flex: 1;\n}\n\nfooter {\n margin-top: auto;\n}\n\n\n通过将body元素的display属性设置为flex，并将flex-direction设置为column，可以将页面内容垂直排列。将main元素的flex属性设置为1可以使其占据剩余的空间。最后，通过将footer元素的margin-top属性设置为auto，可以将其推到页面的底部。"}