更改选项卡时jQuery / HTML调整水平滚动的大小

Question

我的HTML标记中有3个HTML标签，如下所示：

<div id="home" class="tab-pane fade in active"> </div> 
<div id="menu1" class="tab-pane fade in"> </div> 
<div id="menu2" class="tab-pane fade in active"> </div> 

这里的问题是，几乎总是主页选项卡比其他两个菜单选项卡menu1和menu2更大（页面的高度总是更大）。我想在这里做的是根据标签的内容相应地设置滚动条的高度......我以为我可以通过jQuery或以某种方式通过CSS来做到这一点？

我尝试使用这样的普通javascript：

 $("#home").click(function(){
        $(this).toggle();
    });
    $("#menu1").click(function(){
        $(this).toggle();
    });
    $("#menu2").click(function(){
        $(this).toggle();
    });

但在这种情况下没有任何事情发生......

P.S。一个案例就像：

“主页”选项卡包含大量内容，并且一直向下创建水平滚动。

Menu1标签只有50px的高度。当我点击它时，我仍然可以看到缺少的空白区域（从主页选项卡中留下）......

有人能帮助我吗？