如何使 IFRAME 的大小与容器的大小一致？答案

【问题标题】：How to make the size of the IFRAME the size of the container?如何使 IFRAME 的大小与容器的大小一致？
【发布时间】：2010-01-27 00:40:24
【问题描述】：

<td width="120" valign="top" height="100%">
   <iframe src="menu.php" width="100%" height="100%" frameborder="0">
   </iframe>    
</td>

此代码始终在我的浏览器中提供 iFrame 的默认大小（与：

<iframe src="menu.php">
</iframe>

) 我希望 IFrame 获取容器单元格的大小。

我知道我可以使用 PHP 在那个地方包含一个文件，但我想创建一个带有滚动条的长菜单。实现这一点的另一个解决方案也很好，因为我个人不喜欢 IFrame。

谢谢，

伊万

编辑：现在我有了这个，它不显示 div：

<html> 
<head > 
    <title>Untitled Page</title> 
    <style type="text/css"> 
        .scroller { height:100%; overflow:auto; }
    </style> 
</head> 
<body style="background-color: #7C70DA; font-family: Fixedsys, Courier, Courier New; text-align:center; vertical-align:center;"> 
    <center> 
        <div style="position:absolute; left: 40px; right:40px; top: 40px; bottom:40px; background-color: #3931A5; vertical-align:middle; color: #7C70DA "> 
            <table border="0"> 
                <tr> 
                    <td width="160" valign="top" height="100%"> 
                        <div class="scroller"> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 
                            Lipsum <br /> 

                        </div>  
                    </td> 
                    <td width="100%" valign="top"> 

                    </td> 
                </tr> 
            </table> 
            <br /> 
            (c) YVAN JANSSENS 2010      </div> 
    </center> 
</body> 
</html>

【问题讨论】：

+1 欢迎来到 StackOverflow，伊万！
谢谢 ;)。我查了很多答案，这是我的第一个问题：p

标签： html iframe

【解决方案1】：

您可以将菜单内容放在一个 div 中，设置 div 的高度，并将overflow value 设置为自动或滚动。作为旁注，我想鼓励您放弃在 HTML 中使用表格，而是考虑为您的布局使用像 960 Grid System 这样的 CSS 框架。

.scroller { height:500px; overflow:auto; }

<div class="scroller">
  <ul>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
    <li>Options</li>
  </ul>
</div>

【讨论】：

我认为我在实现它时做错了...看看我添加到我的问题中的代码...

【解决方案2】：

在您的第二次尝试中，您需要将 .scroller div 从表中取出，然后它可以工作，至少在 Firefox 3.6 中是这样。

无论哪种方式，都会显示 div。你用的是什么浏览器？

我还要声明一个文档类型。

【讨论】：

虽然我不推荐 css 框架（我更喜欢自己编写），但我肯定会按照 Jonathan Sampson 的建议摆脱表格和中心标签并使用列表。