CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
Macko Tarana
Macko Tarana

Reputation: 175

Stretching tab content

enter image description here

I need to stretch .v-tabs-cont. Image perfectly describes my intentions.

I don't want to stretch whole div.col only the v-tabs-cont height to .vtabs height.

Fiddle

Temporary solution:

$("div.v-tabs-cont").css("min-height", $("ul.vtabs").height() + "px");

But I'm still looking for a CSS solution, just to my knowledge

Upvotes: 2

Views: 278

Answers (2)

Aurélien Gasser
Aurélien Gasser

Reputation: 3120

Option 1:

You can set the height and margin of your elements :

For instance, give a margin-top and margin-bottom to the ul :

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

Give a height to your li elements

li {
  height: 30px;
}

Then set your right panel's height is the sum of margin-top + margin-bottom + num_li * li_height = 10px + 10px + 4 * 30px = 140px

Then you just have to tell the right panel content not to overflow with overflow: scroll for instance

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

demo here (I put my css additions at the bottom of the css section for clarity)

Option 2:

If you cannot set the margin/height of your elements, or if you have a variable number of list elements, follow the same logic to compute the right panel height on page load (using 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');

You still need to add the overflow: scroll to prevent the content from overflowing

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

demo here

Upvotes: 1

codingrose
codingrose

Reputation: 15699

remove float:left from .v-tabs-cont

Fiddle here.

Upvotes: 1

Related Questions