растяжка содержание вкладки

Question

мне нужно растянуть .v-tabs-cont. Изображение прекрасно описывает мои намерения.

Я не хочу растягивать целые div.col только v-tabs-cont высота до .vtabs высота.

Fiddle

Временное решение:..

$ ("div.v-вкладки-прод") CSS ("мин-высота", $ ("ul.vtabs") высота () + "px");

Но я до сих пор ищет решение CSS, только к моему знанию

Answer 1

float:left удалить из .v-tabs-cont

Fiddle here.

Answer 2

Вариант 1:

Вы можете установить высоту и маржа ваших элементов:

Например, дать 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