如何将页脚保留在页面底部并固定页眉？

将页脚保留在页面底部并使用固定页眉

问题：

您希望将页脚放置在页面的最底部，所有其他内容的下方，并保留它滚动时就位，而不像固定位置那样粘在屏幕上。

解决方案：

Ryan Fait 方法

这种方式适用于页眉和页脚高度固定的场景。涉及到：

1. 设置的高度和<主体>到 100% 以确保下一步有效。
2. 给予
   ;包含页面内容 (#content) 的最小高度为 100%。
3. 通过对 #content 施加等于页脚高度的负 margin-bottom 并将其位置设置为相对位置来向上拉动页脚。
4. 在 #content 末尾添加 spacer 元素或使用 padding-bottom 和 box-sizing: border-box 的组合来防止内容隐藏在 #content 后面

添加页眉

要在保持页脚位置的同时包含页眉：

1. 将页眉添加到#content 如果它应该保持正常流。
2. 如果标题需要绝对定位，请添加间隔符或者使用 padding-top 和 box-sizing: border-box 来防止内容重叠。

注意事项：

• 现代浏览器支持 box-sizing ：边框框，但如果需要更广泛的支持，请使用间隔符。
• 确保页眉和页脚此方法的工作高度是固定的。

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