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

Question

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

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

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

Answer 1

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

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