如何根据内容设置 div 的高度？

Question

所以我正在this 网站上工作，并且我在底部有一个选项卡式部分。 我使用 css 构建了我的标签，就像 this 一样。但是当我希望标签内容的大小不同时出现了问题。

我想如果我可以定位内容的高度，我就可以使用 Javascript 设置 .tabs 的高度。

这是我正在使用的代码：

        $('.tab label').click(function() {
            $('.tab.current').removeClass('current');
            $(this).parent('.tab').addClass('current');
            $('.tabs').height($('.tab.current .content').outerHeight());
        });

由于某种原因，它没有抓住正确的价值。我不知道我做错了什么。任何帮助将不胜感激。

编辑：标签结构如下所示：

           <div class="tabs">

           <div class="tab one current">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.one -->

           <div class="tab two">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.two -->

           <div class="tab three">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.three -->

           </div>

.tabs 类需要一个最小高度，因为选项卡绝对位于彼此的顶部。

所以我想做的是获取 .current 类的 .content 的高度，并将该高度设置为 .tabs div。这样它就不会溢出高度，而是将所有内容推到它下面。

我希望这能消除一些困惑。

Answer 1

导致此问题的原因有很多。主要的是 CSS3 过渡。应用 .current 类时，div 正在为高度设置动画。 javascript 在 CSS3 动画完成之前获取值，这就是为什么你没有得到正确的值。

不使用 javascript，更简洁的解决方案是将类应用于 div.tabs：

div.tabs.currentOne {
     height: 250px;
}

div.tabs.currentTwo {
     height: 1022px;
}

div.tabs.currentThree {
     height: 882px;
}

在你的 javascript 中：

$('.tab label').click(function () {
    var $tabs = $('.tabs');
    $tabs.find('.tab.current').removeClass('current');
    var $currTab = $(this).parent('.tab').addClass('current');

    // remove any one of the classes that we'll apply
    $tabs.removeClass('currentOne currentTwo currentThree');

    // determine which one to apply
    if ($currTab.hasClass('one')) {
        $tabs.addClass('currentOne');
    }
    else if ($currTab.hasClass('two')) {
        $tabs.addClass('currentTwo');
    }
    else if ($currTab.hasClass('three')) {
        $tabs.addClass('currentThree')
    }
});

注意 div.tabs 的高度必须考虑子元素的内边距和边框，以及标签的高度。它是 div.content 类的高度 + 内边距 + 2px 底部内边距 + 40px 的标签。

还要确保将正确的类添加到默认为可见的选项卡中。

Answer 2

在你的目标类中设置 height:auto

.your_class{
height:auto;
}

将此类添加到您要分配的元素中。