html - 两个静态大小的列之间的动态大小的 iframe(3 列布局)

Question

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

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

首先，您似乎没有空缺 <div>包含您的 iframe。

一旦就绪，您就可以相对于其他两个放置 iframe div，并简单地最大化该容器内的 iframe。

See demo .