如何将IFRAME的大小设置为容器的大小？

问题描述：

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

该代码总是给人一个iFrame的浏览器中的默认大小（同：如何将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，Yvan！ – Sampson 2010-01-26 16:15:11

谢谢;）。我查找了很多答案，这是我的第一个问题之一：p – friedkiwi 2010-01-26 16:30:43

答

您可以将菜单内容在一个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>

您可以举一个这样的代码的例子吗？ – friedkiwi 2010-01-26 16:14:09

我认为我在实现它时做了一些错误...看看我添加到我的问题的代码... – friedkiwi 2010-01-26 16:24:26

答

在你的第二次尝试，你需要采取的.scroller DIV出表，那么它的工作原理，至少在Firefox 3.6中。

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

我也会声明一个文档类型。

我使用Google Chrome（对于Mac），尽管Safari有同样的问题... – friedkiwi 2010-01-26 17:12:26

虽然我不会推荐一个css框架（我更喜欢自己写这个框架），我肯定会按照乔纳森桑普森的建议摆脱桌子，中心标签和使用列表。 – jeroen 2010-01-26 18:01:14

如何将IFRAME的大小设置为容器的大小？

相关推荐