首页html 移动端footer底部靠拢

html 移动端footer底部靠拢

时间: 2023-08-30 17:03:17 浏览: 141

在移动端，我们可以使用CSS的flexbox布局来实现使footer底部靠拢。首先，我们需要给包裹整个页面内容的父容器设置display属性为flex，并且将flex-direction属性设置为column，以确保页面内容从上到下排列。具体代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; height: 100vh; /*设置页面高度为100视窗高度，以占满整个屏幕*/ display: flex; flex-direction: column; } .content { flex: 1; /*将content的flex属性设置为1，使其占据剩余空间*/ } footer { background: #f1f1f1; text-align: center; padding: 10px; } </style> </head> <body> <div class="content">  </div> <footer> 这里是底部内容 </footer> </body> </html> ``` 通过设置body的display为flex，将内容容器的flex属性设置为1，使内容容器占据剩余空间。这样，当内容容器的内容不够填充整个屏幕时，底部footer会被推到页面底部。同时，我们给footer添加一些样式，使其背景为灰色，居中显示。这样就实现了让footer底部靠拢的效果。

阅读全文