拉伸标签内容

Question

我需要伸展.v-tabs-cont。图像完美地描述了我的意图。

我不想将整个div.col只拉伸到v-tabs-cont高度到.vtabs高度。

Fiddle

临时解决方案：

$（“div.v-tabs-cont”）。css（“min-height”，$（“ul.vtabs”）。height（）+“px”）;

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

Answer 1

从float:left

中删除.v-tabs-cont

Fiddle here.

Answer 2

选项1：

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

例如，向ul：

提供margin-top和margin-bottom

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

为li元素

添加高度

li {
  height: 30px;
}

然后设置右侧面板的高度为margin-top + margin-bottom + num_li * li_height = 10px + 10px + 4 * 30px = 140px

的总和

然后你必须告诉正确的面板内容不要溢出overflow: scroll例如

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

demo here（为了清楚起见，我将css添加内容放在css部分的底部）

选项2：

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

var height = $('.vtabs li:first').height() * $('.vtabs li').length 
              + parseInt($('.vtabs').css('marginTop').replace('px', '')) 
              + parseInt($('.vtabs').css('marginBottom').replace('px', ''));
$('.v-tabs-cont').css('height', height + 'px');

您仍然需要添加overflow: scroll以防止内容溢出

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

demo here