拉伸標籤內容

Question

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

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

Fiddle

臨時解決方法：。

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

但我仍然在尋找一個CSS的解決方案，只是就我所知

Answer 1

從.v-tabs-cont

Fiddle here.

Answer 2

選項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