如何让这个 iframe 使用所有高度？答案

【问题标题】：How to make this iframe use all height?如何让这个 iframe 使用所有高度？
【发布时间】：2013-01-28 04:55:18
【问题描述】：

我想知道如何让“this”iframe/div（标有红色边框）使用所有可用高度。 iframe 距离顶部 160 像素，我希望它到底部。当我将高度设置为 100% 时，它会填满所有内容，但是当我使网页不那么高时，它会很晚才显示滚动条。这是因为他距离顶部 160 像素...有人知道如何解决这个问题吗？

php:

<div id="sidebar"  style="display: none;">
    <div class="sidebar p1"><a onclick="toggle_visibility('sidebar');"><i class="icon-arrow-left-3 fg-color-white"></i></a></div>
    <div class="sidebar p2">settings</div>
    <div class="sidebar p3">change theme color:</div>

    <iframe id="data" src="/test/coredata/sidebar/theme_data.php"/>

</div>

css:

#sidebar{ 
        width: 315px; height: 100%; 
        position: fixed; right: 0px;
        top: 0px; background: #004d5f;
}
#data{width:310px; height:300px; position:absolute; top: 160px; left: 0px; border:3px solid #FF0000;}

屏幕： http://puu.sh/21vAz（在 url 中由于 10 个代表...）

【问题讨论】：

首先看起来不应该在 iframe 中
那么你会怎么做呢？当您提取更多数据时，它需要滚动。
可以滚动一个div，只需要设置overflow

标签： php css iframe height max

【解决方案1】：

您已将 iframe 的高度设置为 300 像素： #data{宽度：310px;高度：300px;

如果你想让它填满整个框架，你应该将它设置为 100%

【讨论】：

不，对不起，正如我所说的；当我将高度设置为 100% 时，它会填满所有内容，但是当我使网页不那么高时，它会很晚才显示滚动条。这是因为他距离顶部 160px...
有一个使用 flex-box 的 css3 解决方案，但它只适用于 IE10，所以我不建议使用它。
IE10，什么是ie，开个玩笑。它需要在 Chrome 和 Firefox、IE 上运行……嗯，如果它在 IE 上运行就好了，但它不是我的主要目标。

【解决方案2】：

    <script language="JavaScript">
    <!--
function calcularAltura()
{
  //Calcular a altura da página actual.
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //Alterar a altura do iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->
</script>

<iframe width="700" id="the_iframe" 
    onLoad="calcularAltura();" 
    src="/test/coredata/sidebar/theme_data.php"
    scrolling="NO"
    frameborder="0"
    height="1">
</iframe>

它应该可以工作;)

【讨论】：