动态大小的 iframe 在两个静态大小的列之间（3 列布局）

Question

我正在寻找的布局是左侧一列静态长度，右侧一列静态长度，中间列拉伸以适应剩余空间。因此，无论调整大小，左侧和右侧的列都应保持相同的大小。这些列中的每一列都是它自己的 div 元素，我将把代码放在下面。我怎样才能让它工作？问题是 iframe 不会拉伸以适应给定的剩余宽度。谢谢！

HTML：

<div id="LeftColumn"></div>
<iframe id="ifrm"></div>
<div id="RightColumn"></div>

CSS：

iframe#ifrm {
    position: fixed;
    top: 3px;
    left: 210px;
    right: 140px;
    height: 98%;
}

div#LeftColumn {
    padding: 3px;
    position: fixed;
    top: 3px;
    left: 3px;
    border: 1px solid #494949;
    background-color: #EEEEEE;
    width: 200px;
    height: 97.5%;
}

div#RightColumn {
    position: fixed;
    right: 3px;
    border: 1px solid #494949;
    background-color: #EEEEEE;
    width: 140px;
    height: 98%;
}

Answer 1

对于初学者，您似乎没有包含您的 iframe 的开头 <div>。

一旦就位，您就可以将您的 iframe div 相对于其他两个进行定位，并简单地最大化该容器内的 iframe。

See demo.