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*/
}

Here is a similar Question and Solution

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

2 个答案: