如何仅使用 CSS 从 iFrame 中将图标粘贴到屏幕底部？答案

【问题标题】：How to stick icon to bottom of screen from within iFrame with CSS only?如何仅使用 CSS 从 iFrame 中将图标粘贴到屏幕底部？
【发布时间】：2020-01-14 16:58:00
【问题描述】：

我在一个页面中有一个 iFrame，它有一个应该贴在屏幕底部的聊天图标（当然，当滚动出视图时它必须保留在 iFrame 中）。

iFrame 延伸到主视口之外，看起来，iFrame 只知道它自己的文档/视口的底部，在我的示例中，它位于浏览器窗口的底部下方。它不知道父页面的底部，在这种情况下是浏览器窗口的底部..

问题很简单，有没有办法让它只在 iFrame 中与 CSS 一起工作？我确实可以选择将页面高度降低到 iFrame 的消息发布。我试图避免 Javascript 解决方案在滚动事件上手动定位图标，因为它的闪烁性......

【问题讨论】：

Plus 1 是一个非常有用的可视化演示，以及知道如何使用视口一词。
我想你会想要使用一个名为 sticky 的 CSS 类并将位置设置为固定，你的 CSS 需要在 iframe 内触发，我给你发一个可爱的演示

标签： html css iframe sticky

【解决方案1】：

我不知道以纯 CSS 方式执行此操作的任何方法，因为 iframe 将完全不知道更大的页面（以及该页面的视口），因为它自己的视口是 iframe 本身的边界，并且屏幕。

我认为这样做的唯一方法是使用 javascript 使用 postMessage 将视口尺寸向下传递到 iframe 中，您可以在其中调整 bottom 值。为避免闪烁，请在图标 CSS 中添加一个简短的 transition，以便它滑入正确的位置。

【讨论】：