如何使用 jquery 计算选项卡的高度以向下推页脚

How do I calculate the height of my tabs with jquery to push footer down

本文关键字：下推 高度 jquery 何使用 计算 选项      更新时间：2023-09-26

我已经设置了一些绝对定位的选项卡，因此我的页脚不会向下推。我不想在我的 css 中将选项卡容器设置为高度，因为内容高度会有所不同。

我想找到一种方法来计算内容div，然后将样式应用于我的.tabs类，以便页脚将向下推到选项卡的内容下方，为其提供高度。有人可以帮助jquery/javascript新手吗

这是我的 HTML： 

<article class="tabs">
    <section class="current">
        <h3>Documents</h3>
        <div>
            <p >content</p>
        </div>
    </section>
    <section>
        <h3>Info</h3>
        <div>
            <p>content1</p>
        </div>
    </section>
    <section>
        <h3>Credentials</h3>
        <div>
            <p>A credentials tab content2</p>
        </div>
    </section>
</article>

这是我到目前为止的脚本： 

  <script type="text/javascript">
    $(function(){
        // Fast and dirty
        $('article.tabs section > h3').click(function(){
            $('article.tabs section').removeClass('current');
            $(this)
            .closest('section').addClass('current');
        });
    });
</script>

更新：$(".tabs .current").find("div").height(); $(".tabs").css("height"," .height");

我尝试将其添加到我的脚本中，它根据需要为我的选项卡div 添加样式，但它无法计算内容div 的高度。 所以第一艺术是错误的，我如何计算内容所在的div 的高度？ 然后将其应用于代码的底部，以将高度添加到我的选项卡div的内联样式中。

您是否尝试过使用 $.height 函数来获取选项卡的高度？

更新：确保在运行任何代码以设置选项卡后触发 $.height。 此外，请确保调用的目标是选项卡容器的选择器，而不仅仅是单个选项卡。

相关文章：