问题标签 [sticky-footer]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3460 浏览

jquery - 页脚动画和jQuery?

我有一个页脚,我使用粘性页脚 css将其保留在页面底部。我希望我的页脚开始折叠,当用户单击一个按钮时,我希望它展开,然后将“展开”链接与div页脚内的不同容器交换div

我将如何使用 jQuery、HTML 和 CSS 来实现这一点?

编辑:

我希望页脚以大约 20px 的高度开始。在页脚中,应该有一个按钮(我猜是链接),上面写着“更多”或“关于”。当用户单击时,页脚应该变高并显示更精细的 div,并带有替代内容(不是“更多”链接)。

0 投票
1 回答
803 浏览

jquery - 带有调整大小图像的粘性页脚附加到页脚

我正在使用 960 网格的网站上工作。在站点的底部,页面内容和包含 100% 宽度的图像的页脚之间有一个 div,因此它会根据浏览器宽度调整大小。您可以在这里查看演示:http ://redone.org/_dev/ski/menu2.html

以上内容很好,因为内容很长。但是,在内容较短的页面上,图像和页脚会向上爬,以显示页脚和浏览器底部之间的多余空间(单击顶部导航中的“菜单 1”或上面提供的链接中的徽标)。进入主页后,调整大小以查看页脚下方的问题。

我想使用类似于 CSS Sticky Footer 方法 (cssstickyfooterDOTcom) 的方法。

由于图像的大小调整(这是所需的),我很难解决这个问题。我想我可能需要使用 jQuery 来更新页脚的高度/偏移量,因为图像高度会发生变化。

任何帮助将不胜感激。

PS对上面的链接奇怪感到抱歉。我是这个论坛的新手,他们只会让我发布一个链接,没有图片来直观地解释我的问题。

0 投票
7 回答
22766 浏览

css - 具有未知高度的 CSS 粘性页脚

有没有办法在不事先知道页脚大小的情况下使用 CSS 将页脚粘贴到浏览器屏幕的底部或内容之后(取决于哪个更长) ?

现在我在一个容器中使用绝对定位,该容器包含页脚和容器的最小高度为 100% 的内容,但是如果我更改页脚,我发现我必须更改容器底部的填充以匹配它的高度.

0 投票
1 回答
169 浏览

sticky-footer - 网站从一边跳到另一边?

当人们浏览我的网站时,页面会从一边跳到另一边。这是由于某些页面没有足够的内容导致垂直滚动条出现。除了不必要地尝试填充页面之外,是否有解决此问题的方法?

谢谢

0 投票
1 回答
889 浏览

css - CSS 粘滞页脚在 8250 BlackBerry 设备上不起作用

我希望我正在开发的移动网站上的页脚能够固定在页面底部。我找到了Ryan Fait 的 CSS Sticky Footer 示例并实现了它。在我可以想象的测试的每一个浏览器上,我发现页脚很好地贴在底部。

然后,它发生了。客户抱怨页脚到处乱扔。在痛苦地询问详细信息后,我发现问题仅出现在一种型号的 BlackBerry 移动设备上:8250 型号。我拿出一个 Windows 虚拟机,下载并安装了 BlackBerry 8250 模拟器,果然,我看到了问题所在。

对于两个 BlackBerry 屏幕高度的页面,页脚位于第一个屏幕的中间,位于其他所有屏幕之上。滚动时页脚不会移动,如果向下滚动到页面的下半部分,页脚将不可见。它固定在顶部屏幕的中间。

我会将 HTML 和 CSS 发布到这个问题的末尾。如果我能得到任何关于为什么在 8250 BlackBerry 型号上发生这种情况的指示或线索,尤其是如何修复它,我将非常感激。

谢谢!

我发现了这个jQuery Sticky Footer hack。我不太确定这是否会成为人们建议我应该接受的事情。不过,我还没有测试过。

更新:这是一个小更新,说明我玩弄了上面链接的 jQuery Sticky Footer hack。它也不适用于提到的黑莓设备。

0 投票
7 回答
6915 浏览

css - CSS 粘性页脚 | 没有固定高度的页脚

我已经从http://www.cssstickyfooter.com/多次实现了粘性页脚。唯一的问题是页脚具有固定的高度。是否有一个纯 CSS 解决方案可以让页脚根据里面的内容增长?

JS 解决方案还不错,但 CSS 会是最好的。

在此先感谢您的帮助。

0 投票
4 回答
2579 浏览

html - CSS: html, body height: 100% 怎​​么会超过 100%?

嘿,我试图做一个底部粘性页脚链接测试,但它一直超过 100%,这意味着它滚动了一点点..

所以我做了一个简单的 HTML 代码,没有任何添加,但它仍然超过 100%,见这里:

问题是,它只滚动了一点点,然后 100% 意味着大约 5-10px 更多.. 这真的很奇怪,在 IE 和 Firefox 上!

提前致谢 !

0 投票
3 回答
471 浏览

html - 粘贴页脚

我试图让我的页脚贴在这个网站的页面底部:https ://account.radonsystems.net 。

不幸的是,它似乎不起作用,尽管它在我使用过的其他任何地方都有效。

这是粘性的 CSS:

有谁知道为什么它不粘在底部?

0 投票
4 回答
1919 浏览

css - 让页脚贴在页面底部

这是网站(在 Wordpress 中制作): http: //milabalami.com 我想在页面底部放置页脚。我如何做到这一点的任何解决方案?我已经尝试过 cssstickyfooter.com 和 xs4all.nl/~peterned/examples/csslayout1.html 但没有一个能按我的意愿工作。发生的事情是页面的主体与页脚重叠。

在过去的两天里,我一直在纠结这个问题,我迷路了。有没有人可以解决这个难题?

0 投票
1 回答
832 浏览

css - CSS 粘性页脚使滚动条在 IE 8 中无法滚动

我在我的网站中使用了这个粘性页脚: http ://www.cssstickyfooter.com/using-sticky-footer-code.html

它完全可以在 Firefox、Chrome、IE7 中运行,但不能在 IE8 中运行。在 IE8 中,滚动条出现但不起作用,我没有其他方法可以向下移动。我正在使用出现在网络上的条件语句:

抱歉,我无法发布地址,我现在没有网络服务器。