如何使用 CSS 创建固定页眉或页脚

2024-02-22 08:12| 来源: 网络整理| 查看: 265

如何使用 CSS 创建固定页眉或页脚

主题：HTML / CSS

答案：使用 CSS 固定定位

您可以使用 CSS 固定定位轻松创建粘性或固定页眉和页脚。只需将值为 fixed 的 CSS position 属性与 top 和 bottom 属性结合使用，即可将元素相应地放置在视口的顶部或底部。

让我们看一下以下示例，以了解其基本工作原理：

示例使用 CSS 实现粘性页眉和页脚 /* 在文档的正文上添加一些填充以防止内容在页眉和页脚下方 */ body{ padding-top: 60px; padding-bottom: 40px; } .fixed-header, .fixed-footer{ width: 100%; position: fixed; background: #333; padding: 10px 0; color: #fff; } .fixed-header{ top: 0; } .fixed-footer{ bottom: 0; } .container{ width: 80%; margin: 0 auto; /* 将 DIV 水平居中 */ } nav a{ color: #fff; text-decoration: none; padding: 7px 25px; display: inline-block; } Home About Products Services Contact Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 将 DIV 水平居中对齐如何使用 CSS 将绝对定位的 DIV 水平居中对齐如何使用 CSS 将一个 div 覆盖在另一个 DIV 上

【本文地址】

公司简介

联系我们