javascript - 在每个选项卡导航中保持 div 等高

Question

我想根据每个选项卡导航中的内容保持 div 高度。现在我使用这段代码来保持 div 高度

$.fn.equalHeights = function () {
var max_height = 0;
$(this).each(function () {
    max_height = Math.max($(this).height(), max_height);
});
$(this).each(function () {
    $(this).height(max_height);
});
};

$('.card-content').equalHeights();

但这里面临的问题是，每当页面加载 Tab 1 Div 时只能正常工作，而保留标签导航标签 div 内容则不起作用。

我什至尝试更改每个选项卡的 div 的类名。如何根据标签内容保持 div 等高？

Answer 1

您可以仅使用 CSS 实现此目的。 col-container 是本例中 div.card-content 或 .col 的父级 div。

.col-container {
     display: table; /* Make the container element behave like a table */
     width: 100%; /* Set full-width to expand the whole page */
}

.col {
     display: table-cell; /* Make elements inside the container behave like table cells */
}