CODEWITHSUNDEEP
javascriptcsstabsheighthtml
popshuvit
popshuvit

Reputation: 110

How to set height of a a div based on its content?

So I am working on this website and I have a tabbed section towards the bottom. I built my tabs using css just like this. But a problem arose when i wanted the tab content to be different sizes.

I figured if I could target the height of the content I would be able to set the height of .tabs with Javascript.

This is the code I'm using:

        $('.tab label').click(function() {
            $('.tab.current').removeClass('current');
            $(this).parent('.tab').addClass('current');
            $('.tabs').height($('.tab.current .content').outerHeight());
        });

For some reason its not grabbing the right value. I dont know what Im doing wrong. Any help would be greatly appreciated.

Edit: The tab structure looks like this:

           <div class="tabs">

           <div class="tab one current">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.one -->

           <div class="tab two">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.two -->

           <div class="tab three">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.three -->

           </div>

The .tabs class Requires a min-height due to the fact that the tabs are being positioned absolutely on top of one another.

So what I would like to do is grab the height of the .content of the .current classand set that height to the .tabs div. so that instead of the height overflowing it will push all content underneath it.

I hope this clears up some of the confusion.

Upvotes: 1

Views: 638

Answers (2)

drizzie
drizzie

Reputation: 3361

There are several things causing this issue. The main one being CSS3 transition. The div is animating height when the .current class is being applied. The javascript is grabbing the value before the CSS3 animation completes which is why you are not getting the correct value.

Instead of using javascript, a cleaner solution would be to apply classes to div.tabs:

div.tabs.currentOne {
     height: 250px;
}

div.tabs.currentTwo {
     height: 1022px;
}

div.tabs.currentThree {
     height: 882px;
}

And in your javascript:

$('.tab label').click(function () {
    var $tabs = $('.tabs');
    $tabs.find('.tab.current').removeClass('current');
    var $currTab = $(this).parent('.tab').addClass('current');

    // remove any one of the classes that we'll apply
    $tabs.removeClass('currentOne currentTwo currentThree');

    // determine which one to apply
    if ($currTab.hasClass('one')) {
        $tabs.addClass('currentOne');
    }
    else if ($currTab.hasClass('two')) {
        $tabs.addClass('currentTwo');
    }
    else if ($currTab.hasClass('three')) {
        $tabs.addClass('currentThree')
    }
});

Note that the height of div.tabs has to consider padding and borders of child elements, and height of the labels. It is the height of div.content class + the padding + the 2px bottom padding + 40px for labels.

Also be sure to add the correct class to the tab that will default to visible.

Upvotes: 3

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

In your target class set the height:auto

.your_class{
height:auto;
}

Add this class to the element you want to assign.

Upvotes: 0

Related Questions