3

考虑以下代码：

<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到标题、菜单和浏览器窗口的相应边缘。这可以做到吗？

4

2 回答 2

2

您可以将 div 包裹在 iframe 周围，并将这些 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>​​​​​​​​​​

在此示例中，我为您的标题留出了 50 像素的空间，但您可以将其更改为您需要的任何大小的标题。只需更改两个 iframe 的最高值。

于 2012-11-03T08:40:33.050 回答
0

将 iframe 弹出到 position:relative 的包装器中；

于 2012-11-02T20:09:51.030 回答