当被固定内容包围时，如何使用浏览器窗口使iframe增长/缩小？

Question

请考虑以下代码：

<html>
<head>
<style>
html {height:100%;}
body {margin:0;}
iframe {height:100%;border:1px dotted red;}

.hdr {min-width:765px}
.logo_left {margin:4px}
.logo_right {float:right;margin:4px}
.menu {float:left;width:175px}
</style>
</head>
<body>

<div class="hdr">
    <img class="logo_left" src="img.png">
    <img class="logo_right" src="img2.png">
 </div>
<iframe class="menu" src="/menu.shtm"></iframe>
<iframe class="content" src="/home.htm"></iframe>
</body>
</html>

从上面的代码中，我有一个具有最小宽度的标题，并且随着浏览器窗口的增长或宽度的缩小而增长。 在标题下面，我有一个固定宽度的iframe ，它可以在高度上增长，但是固定在左侧并且紧跟在标题下面。

我的问题是内容iframe元素。 我需要的是将顶部和左侧边缘固定到位，使用浏览器增大和缩小右边缘和底边缘。 我找不到办法做到这一点。

我已经阅读了很多问题并在这里得到了很好的答案，其中很多都倾向于使用div标签。 有没有一种方法可以让我的内容iframe以我想要的方式布局，严格使用CSS和HTML属性。 在我的情况下，我不能使用JavaScript，所以这不是一个选项。

另外，我宁愿远离将宽度和iframe的高度设置为百分比。 标题和左侧菜单的存在抛弃了定位。 如果有这种限制，我愿意接受建议。

从代码中可以看出，我将两个iframe元素的高度设置为100％。 这意味着这些iframe元素的大小总是超出浏览器的下限，等于我的标题的高度。 这是一个烦恼，但我可以忍受它。 我真正需要的是将我的内容iframe的边缘固定到标题，菜单和浏览器窗口的相应边缘。 可以这样做吗？

Answer 1

您可以在iframe周围包裹div，并将这些div绝对定位到您需要的底部，顶部和侧面。

像这样：
http://jsfiddle.net/wKHVz/

<html>
    <head>
        <style>
            html {height:100%;}
            body {margin:0; min-height: 100%; position: relative;}
            .menuIframe, .contentIframe {width: 100%; height: 100%; border: none; }
            .menuIframe {background: #ff9999; }
            .contentIframe {background: #99ff99; }

            .logo_left {float: left; margin:4px}
            .logo_right {float:right; margin:4px}
            .menu {position: absolute; top: 50px; left: 0px; bottom: 0px; width:175px}
            .content {position: absolute; top: 50px; left: 175px; bottom: 0px; right: 0px;}
        </style>
    </head>

    <body>
        <div class="hdr">
            <img class="logo_left" src="img.png">
            <img class="logo_right" src="img2.png">
         </div>
        <div class="menu"><iframe class="menuIframe" src="/menu.shtm"></iframe></div>
        <div class="content"><iframe class="contentIframe" src="/home.htm"></iframe></div>
    </body>
</html>

在这个例子中，我为你的标题提供了50px的空间，但是你可以将它改成你需要的任何大小的标题。 只需更改两个iframe的最高值即可。

Answer 2

将iframe弹出到一个位置为relative的包装器中;

当被固定内容包围时，如何使用浏览器窗口使iframe增长/缩小？

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-11-03 08:40:33

解决方案2
0 2012-11-02 20:09:51

当被固定内容包围时，如何使用浏览器窗口使iframe增长/缩小？

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-11-03 08:40:33

解决方案2 0 2012-11-02 20:09:51

解决方案1
2 已采纳 2012-11-03 08:40:33

解决方案2
0 2012-11-02 20:09:51