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

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

1 个答案: