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 个答案: