我如何使两个框架适合页面的宽度?

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

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

这是一个类似的问题和解决方案

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

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

相关内容

最新更新

热门标签：