Отрегулируйте высоту столба таблицы на основе содержимого внутри него

Question

Как отрегулировать высоту td на основе iframe Высота. Я пробовал height:auto, но он не работает. Каждый iframe имеет различное содержание и поэтому высота также отличается

Я использую контентную карусель для переключения между одним iframe другим.

Первоначально происходит то, что карусель контента автоматически перемещается между каждым фреймом. А потом приземляется на первом iframe. Затем пользователь может использовать навигацию карусели для переключения между фреймами.

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

Ниже приведен код, я использую, чтобы изменить высоту каждого фрейма и 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);