如何使用 CSS 将 footer 设置在页面底部
要将 footer 设置在页面底部，可以使用 CSS 的定位属性来实现。以下是一种常见的方法：\n\nHTML 代码：\n\n<body>\n <header>Header</header>\n <main>Main Content</main>\n <footer>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上述代码使用了 flex 布局，通过设置 body 元素的 display: flex; flex-direction: column; min-height: 100vh;，使得页面的主要内容 (main) 和页脚 (footer) 都被包裹在一个 flex 容器中，并且设置了最小高度为视口的高度。\n\n然后，通过将主要内容 (main) 的 flex 属性设置为 1，使其占据剩余的空间，页脚 (footer) 通过设置 margin-top: auto; 来将其置于底部。\n\n这样就可以将 footer 设置在页面底部了。
原文地址: https://www.cveoy.top/t/topic/pPmS 著作权归作者所有。请勿转载和采集!