如何使两个 iframe 适合页面的宽度？答案

【问题标题】：How can I make two iframes fit the width of the page?如何使两个 iframe 适合页面的宽度？
【发布时间】：2015-05-30 00:56:21
【问题描述】：

我的问题是页面上有两个 iframe，一个用于持久侧边菜单，一个用于主体内容。我希望侧边菜单占据大约 12% 的屏幕（只是个人选择），然后是适合其余页面宽度的内容。我已经看到了许多将单个 iframe 安装到页面上的解决方案，但我找不到任何可以准确解决我的具体问题的解决方案。

我尝试将bodyContent iframe 的宽度设置为 88%，这样 88 + 12 = 100，但这会使 iframe 出现在 menu iframe 下方。我猜在这种情况下 100% 对页面来说太宽了......？我的基本解决方案是将bodyContent 的宽度设置为 87.6%（87.7% 太大了），以便它恰好适合页面的整个宽度，并在右边框上带有一小条白色。

我知道必须有一个更简单的解决方案来解决这个问题，以便两个 iframe 可以干净地适应页面的整个宽度。我怎么能这样做呢？

这是我现在拥有的（iframe 的源是我隐藏的 .aspx 文件）：

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="content-language" content="en-us" />      

        <style>
            .menu {
                float: left;
                width: 12%;
            }
            .bodyContent {
                float: left;
                width: 87.6%;
                border: none;
            }
            body {
                margin: 0;
                padding: 0;
            }
            div#root {
                position: fixed;
                width: 100%;
                height: 100%;
            }
            div#root > iframe {
                height: 100%;
            }
        </style>      
    </head>     

    <body>
        <div id="root">
            <iframe class="menu" src="hidden"></iframe>
            <iframe class="bodyContent" src="hidden"></iframe>
        </div>
    </body>
</html>

【问题讨论】：

不要忘记宽度不包括边距。例如您的框架可能是 88%+10px，因为它们有 5px 的边距，使总宽度 88%+12% + 20px = 100% + 20px - 比可用空间更宽。

标签： html css iframe width

【解决方案1】：

默认情况下，您的 iFrame 宽度不包括边框。默认情况下，您的边框为 2px 宽。要包含它，请添加 box-sizing: border-box; css 样式以在 iframe 宽度中包含边框。

JSFIDDLE

iframe {
    box-sizing: border-box; /*include borders in the width calculation */
}
.menu {
    float: left;
    width: 12%;
}
.bodyContent {
    float: left;
    width: 88%; /*width can now be 88%*/
    /*border: none; removed so you can see the iframe in this example*/
}

Here is a similar Question and Solution

【讨论】：

【解决方案2】：

div#root > iframe {
       height: 100%;
       float:left;
       box-sizing:border-box;
   }

http://jsfiddle.net/x2co8yrs/2/

【讨论】：