Javascript 拉伸选项卡内容

我需要拉伸

.v-tabs-cont

。这个图像完美地描述了我的意图

我不想将整个div.col仅从

v-tabs-cont

height拉伸到

.vtabs

height

临时解决方案：

$（“div.v-tabs-cont”）.css（“最小高度”，$（“ul.vtabs”）.height（）+“px”）

---

但据我所知，我仍在寻找CSS解决方案

从

中删除
float:left
。v-tabs-cont

---

选项1:

可以设置元素的高度和边距：

例如，向ul提供

页边距顶部

和

页边距底部

：

ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

为

li

元素指定一个高度

li {
  height: 30px;
}

然后将右面板的高度设置为

页边距顶部

+

页边距底部

+

num\u li

*

li\u高度

=10px+10px+4*30px=140px

然后，您只需告诉右侧面板内容不要溢出，例如使用

overflow:scroll

.v-tabs-cont {
  height: 140px;
  overflow: scroll
}

（为了清晰起见，我将添加的css放在css部分的底部）

选项2:

如果无法设置元素的边距/高度，或者列表元素的数量可变，请按照相同的逻辑计算页面加载时的右面板高度（使用jQuery）

您仍然需要添加

溢出：滚动

，以防止内容溢出

.v-tabs-cont {
  overflow: scroll;
}

---

它必须是150像素。看看它的高度，它不是100%，我真的很感激，但我不想把整个

div.col

都拉伸到

v-tabs-cont

到

.vtabs

高度。谢谢你的时间，但这不是我想要的。我需要一个灵活的解决方案。这将是wordpress中的一个短代码，因此没有指定的选项卡数。我不想要滚动条，因为它看起来很糟糕。jQuery将是最简单的解决方案，但我相信有一种方法可以用纯CSS实现它。@MackoTarana您可以用

溢出：滚动
替换
溢出：隐藏
，例如（）这将在我的样式选项卡中隐藏内容和边框。然后不要设置
溢出
属性或将其设置为
溢出：可见
：）
.v-tabs-cont {
  overflow: scroll;
}