首页html页脚固定到底部

html页脚固定到底部

时间: 2023-08-08 15:09:12 浏览: 84

你可以使用 CSS 的 flex 布局来实现将 HTML 页面的页脚固定到底部。具体的实现方法如下： 1. HTML 中添加一个页面主体容器 div，将其设置为 flex 布局，同时设置其高度为 100%； 2. 在主体容器 div 中添加两个子容器，一个用于放置页面内容，另一个用于放置页脚； 3. 将页面内容的容器设置为 flex-grow: 1，使其占据主体容器的剩余空间； 4. 将页脚容器设置为 flex-shrink: 0，使其不随着页面内容的增加而收缩； 5. 将主体容器设置为 flex-direction: column，使其子元素按照垂直方向排列； 6. 最后，将页脚容器的位置设置为固定，同时将其放置在主体容器的底部。下面是一个示例代码： ``` <!DOCTYPE html> <html> <head> <style> html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: column; height: 100%; } .content { flex-grow: 1; } .footer { flex-shrink: 0; position: fixed; bottom: 0; width: 100%; background-color: #333; color: #fff; text-align: center; padding: 10px; } </style> </head> <body> <div class="container"> <div class="content"> <h1>Page content goes here...</h1> </div> <div class="footer"> Footer content goes here... </div> </div> </body> </html> ```

阅读全文