如何将页脚固定到网页底部？

如何将页脚固定在页面底部

很多网站都会遇到页脚没有固定在页面底部的问题页面，尤其是内容较少的页面。为了确保页脚保持在页面底部，无论屏幕大小或内容长度如何，这里有一个 CSS 解决方案：

#footer {<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

此代码将以下属性分配给footer:

• 位置：将页脚的位置设置为固定，确保无论页面的滚动位置如何，它都保持在原位。
• 高度：指定高度页脚。
• background-color：调整页脚的背景颜色以用于演示目的。
• bottom：定位页脚的下边缘距页面底部 0 像素。
• 左：将页脚的左边缘与页面的左边缘对齐。
• 右：将页脚的右边缘与页面的右边缘对齐。
• margin-bottom：删除任何不需要的下边距。

至确保内容不与固定页脚重叠，可以对 body 元素应用额外的 CSS 规则：

body {<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

这会向正文添加 50 像素的下边距，为固定页脚创建空间显示。

以上是如何将页脚固定到网页底部？的详细内容。更多信息请关注PHP中文网其他相关文章！