Question

如何根据td高度调整iframe的高度。我试过了height:auto，但它没有用。每个iframe都有不同的内容，因此高度也不同

我正在使用内容轮播在一个iframe与其他iframe之间切换。

最初发生的事情是内容轮播动画在每个iframe之间自动切换。然后登陆第一个iframe。然后，用户可以使用轮播导航在iframe之间切换。

<td class="tabContainer">
<div id="multipleIframe">
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
</div>
</td>

以下是我用来更改每个iframe高度和td高度的代码。

setTimeout(function() {
$("#multipleIframe iframe").each(function() {
var heightIframe;
heightIframe = $(this).contents().height();
$(this).css({
    "height": heightIframe
});
var tabHeight;
tabHeight = heightIframe + 50;
$(".tabContainer").css({"height":tabHeight+"px"})
});
}, 3000)

我们能解决这个问题吗？

Answer 1

每次迭代中tabHeight值都设置为heightIframe。把它放在循环外面。

setTimeout(function() {
  var tabHeight=0; // set it to zero and outside the loop
  $("#multipleIframe iframe").each(function() {
    var heightIframe = $(this).contents().height();
    $(this).css({
      "height": heightIframe + "px" <--- add "px" here too
    });
    tabHeight += heightIframe + 50; // add each iframe's height to tabHeight
  });
  $(".tabContainer").css({"height":tabHeight+"px"}); // apply the tab height
}, 3000);

根据其中的内容调整表列的高度

1 个答案: