如何将页脚定位在具有固定页眉的页面底部？

将页脚定位在带有固定页眉的页面底部

了解问题和要求：

您寻求将页脚定位在页面的绝对底部，即使有固定的页眉也是如此。这消除了使用位置：固定或将页脚放在可见屏幕的底部。

Ryan Fait 的粘性页脚方法：

我们将采用 Ryan Fait 的方法作为它满足您的具体要求条件：

步骤：

1. 将 HTML 和正文高度设置为 100%： 为 定义高度：100%和<主体>建立 100% 视口高度。
2. 为内容指定 100% 最小高度： 为 #content 指定最小高度：100% 以确保它占据整个视口高度。
3. 绝对定位页脚并偏移内容： 将页脚定位在下方#content，给#content一个负的margin-bottom，等于页脚的高度。然后，将#footer绝对放置在#content上方。

4. 防止内容与页脚重叠：两个选项：

   • 间隔符元素： 添加
   • Padding-Bottom 和Box-Sizing: 在 #content 上使用 padding-bottom: 100px 和 box-sizing: border-box （使用正确的供应商前缀）。

   添加标题：

   1. 正常标题流程： 对于正常流程中的标头，将其嵌套在 #content 中。
   2. 绝对定位标头： 要绝对定位标头，请相应调整 #content 的 padding-top。

   现代方法Box-Sizing:

   现代浏览器完全支持 box-sizing: border-box，这样就不再需要 spacer 元素了。然而，使用间隔元素仍然适合更广泛的浏览器兼容性。

   结论：

   这种方法提供了一个强大的解决方案，可以将页脚定位在页面底部，并使用固定标题，确保在所有设备上实现最佳显示。

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