CODEWITHSUNDEEP
javascriptjqueryhtmlcssabsolute
Matt Ginn
Matt Ginn

Reputation: 294

Find the height of absolutely positioned child element and setting it's height to its parent

I have a list of comments that have the content in an absolutely positioned div. This was required as a part of the design. They are in a popup box which is set to display: none and then faded in using a click event.

The issue that I am having is that I need to get the height of the inner absolute content and set that height to its parent and can't seem to get it to work. Each item could be of any length as they are comments.

I have made a fiddle here to show what sort of structure I have. http://jsfiddle.net/ZTDyA/

This is the structure

<div class="hidden">
    <ul class="list">
        <li>
            <div class="inner">there is some content here</div>
            <div class="base">This is a div under the .inner div</div>
        </li>
        <li>
            <div class="inner">For the thing I have made this has to be positioned absolutely, but the content could be of any length so I need the parent to each of these inners to be set to the height of the inner div.</div>
            <div class="base">This is a div under the .inner div</div>
        </li>
    </ul>
</div>

Upvotes: 1

Views: 1821

Answers (2)

Sandeep
Sandeep

Reputation: 46

check this : 

$('button').on('click', function() {    
var hei=  $('.inner').height();
$('.inner').closest('li').height(hei); 
});

Upvotes: 0

Christian
Christian

Reputation: 19740

Sure, you could do something like this:

$('.list li').each(function() {
    $(this).height( $('.inner', this).height() );
});

jsFiddle: http://jsfiddle.net/ZTDyA/1/

What I don't get is why it's positioned absolutely. If anything, you might want to position the LI's absolutely. Perhaps if you elaborate on that, we can provide a better solution. Setting height like this (via js) is poor practice.

Upvotes: 2

Related Questions