html - iframe 破坏父元素大小

Question

我有一个 page带有一个菜单，用于从 MySQL 查询中生成一个表，在菜单中选择哪些字段。我需要“刷新表格按钮”来仅在屏幕的一部分生成表格，并且就功能而言，iframe 完成了它的工作。然而，当我专注于 View 时，框架开始出现问题。虽然它看起来在左侧和顶部有界，但在右侧和底部它超过了父框架 div 和主体 div 的大小。

有没有办法在不改变功能的情况下解决这个问题？

HTML

<div class="menucontainer">
<div class="leftbox">
    Selected options
    <form method="post" action="genTable.php" target="myIframe">

    <select id="leftValues" name="cols[ ]" size="5" multiple>
        <option>paper</option>
        <option>authors</option>
    </select>

    <div class="submitbutton">
    <input type="submit" name="submit" value="Refresh Table" onclick="selectAll();">
    </div>

    </form>
</div>

<div class="buttons">
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />

</div>

<div class="rightbox">
    Available options
    <select id="rightValues" size="5" multiple>
        <option>id</option>
        <option>journal</option>
        <option>title</option>
    </select>
</div>

</div>


<h1>Financial Frictions Papers</h1>
</div>


<iframe name="myIframe">
</iframe>

</div>
</body>

CSS

body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    color: #111;

    font-size: 12px;
    background:#2e2e2e;
    height: 100%;
    /*292929*/
    /* default bfbfbf*/
}

.frame {
padding: 20px;
color: #000000;
height: 100%;
    min-height: 580px;
    background: #3AAB8D;/*#504f4f;*/
}

.top {
    background: #1188FF;
}

iframe{
    position: absolute; 
    width: 100%; 
    height: 100%;
}

Answer 1

您绝对定位 iframe，然后将其宽度设置为 100%，这意味着它将与整个页面一样宽，而不是标签所在的 div，因为它实际上并不“在”分区

尝试减小宽度或不使 iframe 绝对定位。

当我在 Firefox 中编辑您的 CSS 时，删除绝对定位并将宽度更改为 99.8%(以适应滚动条)有效。