一旦屏幕尺寸小于 1200 像素，iframe 就会停止工作。- Joomla 3 bootstrap3 模板

Question

我建立了一个建筑网站，其中包含嵌入 I 框架中的另一个网站的房屋图像和计划。我正在使用带有 bootstrap 3 的 Joomla 3.4，在屏幕尺寸低于 1200px 之前它工作正常。它仍然可以正常显示，但在移动设备上无法点击任何内容，或者如果您将 PC 上的浏览器大小更改为 1200 像素以下。

我在 iframe 的外侧添加了一个 div 并为其指定了外部 IDdiv 然后我按照另一个网站的建议在代码下方添加了代码。

#outerdiv iframe {
position: absolute; /*-- I have also tried relative--*/
top:0;
left: 0;
width: 95%;
height: 100%;
overflow: hidden;
}

它现在可以正常工作，但它覆盖了页面上的其他元素。一旦我在它周围添加另一个 div 或向 iframe 添加一个 class 以防止它与其他元素重叠，它就会再次停止可点击。有人遇到过这个问题吗？如果可以，请分享如何解决这个问题

谢谢戴瑞恩

Answer 1

看到 position: absolute; 从文档流中取出元素并有效地设置它们 "on top" 其他元素，我怀疑在这种情况下发生的是你有另一个元素重叠你的iframe 等 "unclickable."

如果您将元素的位置设置为相对位置并给它一个高 z-index 数字，它应该将它设置为 "above" 文档中的所有内容并再次可点击。

iframe {
    position: relative;
    z-index: 100; /*or higher*/
}

一旦屏幕尺寸小于 1200 像素，iframe 就会停止工作。- Joomla 3 bootstrap3 模板

Iframe stops working once screen size is less than 1200px.- Joomla 3 bootstrap3 template

css

iframe

twitter-bootstrap-3

joomla3.0