带有滚动导航栏的绝对定位答案

【问题标题】：Absolute positioning with scrolling navbar带有滚动导航栏的绝对定位
【发布时间】：2013-12-10 07:16:18
【问题描述】：

需要一些帮助，在这里找不到这个特定的问题。我的网页底部有一个绝对定位的导航栏，页面内容的最大宽度为 1000 像素，但导航栏可以随浏览器一起拉伸（尽管当浏览器的宽度调整为小于 1000 像素时，导航栏位于固定宽度）。

一切正常，但如果您将浏览器水平调整为小于 1000 像素并左右滚动，内容会滚动（应该如此），但导航栏内容是固定的。我希望它与内容一起滚动，但其行为与在所有其他实例中的行为完全相同。

有什么想法吗？底部中心的缺失图像是滚动顶部底部以跳转页面，因此请忽略它。你可以在这里获取 CSS： http://trademarkjunkie.com/absolute/style.css

任何帮助将不胜感激，干杯。

编辑 - 我更新了链接并将文本居中在具有自动水平边距的 div 中（并将 css 中的位置从固定更改为绝对）。当您向下滚动时，该栏将保持在浏览器上的原始位置，并且不会保持底部对齐。有什么想法吗？

【问题讨论】：

【解决方案1】：

但导航栏的内容是固定的。我希望它与内容一起滚动，但其行为与在所有其他实例中的行为完全相同。

底部导航栏定位为“固定”，因此它不会随着您的内容滚动。如果你想滚动，试着给你的类“底部导航”一个“绝对”而不是“固定”的位置。

如果我解释正确的话，这应该能回答你的问题..

【讨论】：

我试过了，但它做了一件非常奇怪的事情。我更新了链接并将文本居中放置在具有自动水平边距的 div 中，因此您可以看到：trademarkjunkie.com/absolute 当您向下滚动时，该栏保持在浏览器上的原始位置，并且不会保持底部对齐。有什么想法吗？
经典的“粘滞页脚”问题。您希望它在垂直滚动上具有固定位置，在水平滚动上具有绝对定位，对吗？ Check out this link今晚给你提供代码示例。
将“粘滞页脚”应用于您的 HTML/CSS。祝你好运！ Sticky Footer *also: 尝试更多地使用类而不是 ID。
嘿伙计，感谢您的帮助。但是，您发送的带有粘滞页脚的链接在我的页面中实现，它似乎不起作用。我需要一个页脚贴在浏览器的底部，而不是页面的底部。当浏览器宽度超过 1000 像素时，它应该拉伸到整个浏览器宽度，当小于 1000 像素时应该保持在该固定宽度，与页面上的其他内容一起水平滚动的能力，但也应该保持在浏览器底部时垂直滚动。