CSS - 修复页面最底部的元素以进行左/右水平滚动
我有一个使用此脚本水平滚动的网站： http://tympanus.net/Tutorials/WebsiteScrolling/index.html
有时使用此版本我最终得到了一个垂直滚动条，因为根据用户的分辨率，副本可能会进一步向下延伸到页面的可见部分。
我有一些页脚信息，我想随着页面水平滚动，但如果有滚动条，而不仅仅是窗口，我希望它始终位于页面的底部。使用此 CSS：
.footer { position: fixed; bottom: 10px; left: 100px; }
不能执行我想要的操作，因为页脚将覆盖网站的副本。
所以我也尝试了这样的方法：
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
这也不起作用，因为信息仍然总是被推离页面的可见部分。
因此，我正在寻找一种解决方案，本质上让页脚信息自然放置在页面上的任何位置，但在页面水平滚动时始终固定为距左侧 100px。
感谢您的帮助！
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定您是否可以完全使用 CSS 来完成此操作。我会制作一个javascript（或jquery）函数来检测内容div（或正文）的大小并将页脚div放置在其后面（使用 偏移（如果您使用的是 jquery），或者通过操作上边距（如果没有）。然后，您可以在窗口上使用 .scroll 方法 在用户滚动到时移动 div 的水平位置右边的。
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.