Height of tabs do not expand with their contents

Question

I have tabs which contain text. When I try to set the height with height:auto or height:100%, it works only when using px. However this prevents the tabs from expanding when the text is long.

this is my css:

.tab-section {
    float: left;
    width: 100%;
    height: 792px;
    margin-bottom: 25px;
}

How do I make the height auto?

what about using `overflow: auto;` and add, for example `max-height: 500px;`? — GrafiCode, Oct 17 '15 at 18:34
" what about using overflow: auto; and add, for example max-height: 500px;? "i have already tried this , but with this create a scrolling in a container with static height , i want the height of page is dynamic when the content change in tabs — SURTLER77, Oct 17 '15 at 18:39

score 0 · Answer 1 · answered Oct 17 '15 at 19:02

It's because you are displaying the tab-content inside the li element. As the li it's a menu it looks like a broken layout.

You should display the tab-content outside of the tab-section. Also be aware of floating(for example, if the parent it has float: left, the child should also have float:left to fulfill the parent height)

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

.tab-content with position:absolute

Based on feeela answer

absolute positioned elements are removed from the flow, thus ignored by other elements. So you can't set the parents height according to an absolutely positioned element.

You can use this script to handle it:

$("[type = radio]").click(function () {
    var oh=$(this).parent().find(".content").outerHeight();    
    $(".tabs").height(oh);
});

Fiddle demo

Also you can use viewport units(vh) or calc() on ul.tabs (css3)

Height of tabs do not expand with their contents

2 Answers2