Jquery 我有两个div在Container/section div中，但其中一个被推出Container div，为什么？

我正在用Wordpress建立一个网站，对我的主页有一个问题。它分为4个容器分区，每个分区占据整个屏幕。在我的第四部分中，我想要一个类似于tab函数的东西。也就是说，container4 div底部有4个按钮，根据您单击的四个按钮中的哪一个，将加载不同的内容（内容1、2、3或4）

我在codepen上找到了一个有用的代码，并根据我的需要对其进行了一些修改，但我遇到了一个似乎无法解决的问题

按钮被包装在一个“button wrap”div中，然后我还有一个content div，它包含了4个div，其中的内容应该在单击按钮时被交换掉。这对我拥有的jQuery代码非常有用，内容div也与主Container 4 div很好地对齐。然而，即使我也将button wrap div放置在Container div中，它仍被向下推到我主页的页脚中。我尝试添加内联块，但这没有任何作用。按钮wrap div和内容div看起来只是互相阻塞。我不知道为什么

这是我的密码：

jQuery（函数（）{
jQuery（'.button'）.first（）.addClass（'active'）；
jQuery（'.button'）。单击（函数（）{
var jQuerythis=jQuery（this）；
jQuerysiblings=jQuerythis.parent（）.children（），
position=jquerysblings.index（jQuerythis）；
控制台日志（位置）；
jQuery（'.content div'）.removeClass（'active'）.eq（position）.addClass（'active'）；
jquerysblings.removeClass（'active'）；
jQuerythis.addClass（'active'）；
})
});
/*容器4样式*/
.集装箱4{
高度：100vh；
宽度：100%；
保证金：0；
背景色：#CDE5E1；
文本对齐：居中；
}
/*选项卡HP样式*/
.一{
高度：100vh；
宽度：100%；
保证金：0；
背景色：红色；
显示：内联块；
}
.二{
高度：100vh；
宽度：100%；
保证金：0；
背景颜色：黄色；
位置：相对位置；
}
.三{
高度：100vh；
宽度：100%；
保证金：0；
背景颜色：紫色；
}
.4{
高度：100vh；
宽度：100%；
保证金：0；
背景颜色：绿色；
}
/*选项卡HP按钮样式*/
.内容{
高度：100vh；
宽度：100%；
显示：内联块；
}
.纽扣包装{
底部：0；
宽度：100%；
显示：内联块；
}
a、 钮扣{
颜色：#fff；
文字装饰：无；
填充：15px 50px；
显示：内联块；
}
a、 活跃的{
颜色：黑色；
}
div[类*=“内容-”]{
显示：无；
}
活动分区{
显示：内联块；
}

内容
内容2
内容3
内容4
发生这种情况是因为您已将100vh分配给主容器，即
容器4
。如果您将其删除，它将正常工作。如果希望选项卡显示在
内容
元素的100vh范围内，可以尝试使用绝对位置


jQuery（函数（）{
jQuery（'.button'）.first（）.addClass（'active'）；
jQuery（'.button'）。单击（函数（）{
var jQuerythis=jQuery（this）；
jQuerysiblings=jQuerythis.parent（）.children（），
position=jquerysblings.index（jQuerythis）；
控制台日志（位置）；
jQuery（'.content div'）.removeClass（'active'）.eq（position）.addClass（'active'）；
jquerysblings.removeClass（'active'）；
jQuerythis.addClass（'active'）；
})
});
.container4{
高度：100vh；
宽度：100%；
保证金：0；
背景色：#CDE5E1；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
}
/*选项卡HP样式*/
.一{
宽度：100%；
身高：100%；
保证金：0；
背景色：红色；
显示：内联块；
}
.二{
宽度：100%；
身高：100%；
保证金：0；
背景颜色：黄色；
}
.三{
宽度：100%；
身高：100%；
保证金：0；
背景颜色：紫色；
}
.4{
宽度：100%；
身高：100%；
保证金：0；
背景颜色：绿色；
}
/*选项卡HP按钮样式*/
.内容{
宽度：100%；
弹性：1；
显示：内联块；
}
.纽扣包装{
宽度：100%；
显示：内联块；
}
a、 钮扣{
颜色：#fff；
文字装饰：无；
填充：15px 50px；
显示：内联块；
}
a、 活跃的{
颜色：黑色；
}
div[类*=“内容-”]{
显示：无；
}
活动分区{
显示：内联块；
}

内容
内容2
内容3
内容4
如果您可以发布单独的问题，而不是将您的问题合并为一个问题，则这是首选。这样，它可以帮助人们回答你的问题，也可以帮助其他人寻找至少一个你的问题。谢谢好的，我会拿出第二期，在另一个问题中发布！Hi@sakpal当我从container div中删除100vh时，按钮行将不再与页脚重叠。然而，我似乎无法将按钮和选项卡内容设置为屏幕的100%高度。也就是说，选项卡内容将继续具有100vh，并且按钮仍按在内容下。但我希望两者一起填满100VH，你可以用flex来实现。@sakpal，是的，你也可以用flex来实现。请创建一个例子来帮助Jana。我已经添加了这个片段。希望这是你需要的。