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

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

html css iframe

Html 当被固定内容包围时，如何使用浏览器窗口使iframe增长/收缩？,html,css,iframe,Html,Css,Iframe,考虑以下代码： <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} </

考虑以下代码：

<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>


html{高度：100%；}
正文{页边距：0；}
iframe{高度：100%；边框：1px点红色；}
.hdr{最小宽度：765px}
.logo_左{边距：4px}
.logo_right{float:right；margin:4px}
.菜单{浮动：左；宽度：175px}

从上面的代码中，我得到了一个具有最小宽度的标题，它可以随着浏览器窗口宽度的增大或缩小而增大。在页眉下方，我有一个固定的宽度

iframe

，可以增加高度，但固定在页眉的左侧和正下方

我的问题是content

iframe

元素。我需要的是使顶部和左侧边缘固定到位，并使右侧和底部边缘随浏览器增长和收缩。我找不到这样做的方法

我已经通读了很多问题，在这里有很好的答案，其中许多问题倾向于使用

div

标记。有没有一种方法可以让我的内容

iframe

严格使用CSS和HTML属性，按照我想要的方式进行布局。在我的例子中，我不能使用JavaScript，所以这不是一个选项

另外，我更希望不要将

iframe

的宽度和高度设置为某个百分比。标题和左侧菜单的存在使定位偏离。如果这一限制不存在，我愿意接受建议

从代码中可以看到，我将两个

iframe

元素的高度都设置为100%。这意味着这些

iframe

元素的大小总是超出浏览器的下限，等于我的标题的高度。这是一种烦恼，但我能忍受。我真正需要的是将我的内容

iframe

的边缘固定到标题、菜单和浏览器窗口的相应边缘。可以这样做吗？

将iframe弹出到一个包装器中，包装器的位置为：相对

您可以将div环绕在iFrame上，并将这些div绝对定位到所需的底部、顶部和侧面

像这样：


html{高度：100%；}
正文{边距：0；最小高度：100%；位置：相对；}
.menuIframe、.contentIframe{宽度：100%；高度：100%；边框：无；}
.menuIframe{背景：#ff9999；}
.contentIframe{背景：#99ff99；}
.logo_left{float:left；margin:4px}
.logo_right{float:right；margin:4px}
.菜单{位置：绝对；顶部：50px；左侧：0px；底部：0px；宽度：175px}
.content{位置：绝对；顶部：50px；左侧：175px；底部：0px；右侧：0px；}

在本例中，我为您的头提供了50px的空间，但您可以将其更改为所需的任何大小的头。只需更改两个iFrame的最大值。

mikefortuna：请发布一些示例代码。我知道如何用div把它包起来，很简单。我应该在iframe上设置任何其他CSS属性吗？我已经尽我所能让这个建议起作用了。请修改以上代码，并将其作为示例发布。

<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>