拉伸标签内容

enter image description here 拉伸标签内容

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

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

Fiddle

临时解决方法：。

$（ “div.v袢-CONT”）的CSS（ “最小高度”，$（ “ul.vtabs”）高度（）+“px”）;

但我仍然在寻找一个CSS的解决方案，只是就我所知

来源

2013-11-27 Macko Tarana

从.v-tabs-cont

Fiddle here.

来源

2013-11-27 17:39:35 Hiral

它必须是150像素添加overflow: scroll防止内容。并看看它的高度不是100％ –

但感谢“float：left”;） –

@MackoTarana更新了小提琴。 – Hiral

选项1删除float:left：

您可以设置高度和你的元素的余量：

举例来说，给一个margin-top和margin-bottom到UL：

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

提供一个高度到您li元素

li { 
    height: 30px; 
}

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

然后您只需告诉右面板内容不要与溢出例如

.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');

你仍然需要溢出

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

demo here

来源

2013-11-28 03:36:13

感谢您的时间，但这不是我正在寻找的。我需要灵活的解决方案。这将是wordpress中的简码，因此没有指定数量的选项卡。 –

@MackoTarana我的编辑显示更合适的解决方案 –

我不想滚动，因为它与我的风格看起来很可怕。 jQuery将是最简单的解决方案，但我相信有一种方法可以使用纯CSS。 –

拉伸标签内容

回答

相关问题