可调整大小的响应切换IFRAME

Question

我需要一个有2个IFRAME的布局，在屏幕上可以通过javascript切换而不刷新内容（它们只是改变位置），并且可以调整列的大小。在移动设备上，它们应该是100%宽度堆叠的。

此处绘制示例

[请参阅此处的codepen：][2][2]:https://codepen.io/az3l10/pen/vygvmep

我的问题是，由于DIV位置是绝对的，我不能调整列的大小，如果我改变了位置，我不能切换。

谁能帮忙吗？

Answer 1

如果可以使用CSS Flexbox或CSS Grid实现绝对定位，则不要使用绝对定位。

我们知道我们希望两个元素A和B，出现在我们的站点上，并且这两个元素属于一起。这意味着,我们创建了两个包装在分组元素中的元素：

null

/* Ignore; for demonstration-purposes */
html {height:100%}
body {margin:0;min-height:100%}
#a, #b {min-width:100px;min-height:100px}
#a {background-color:red}
#b {background-color:blue}

<div class="wrapper">
  <div id="a"></div>
  <div id="b"></div>
</div>