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

Question

我的问题是我的页面上有两个 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>

Answer 1

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

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

Answer 2

默认情况下，您的 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*/
}

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

How can I make two iframes fit the width of the page?

html

css

iframe

width