将自动高度设置为具有最内层绝对 div 的父 div

Question

我正在尝试为具有绝对最内层子元素的父 div 设置自动高度。假设我有 3 个元素。一个父 div、一个表和一个表内的内部 div（具有绝对位置）。默认情况下，所有最内层的 div 都是隐藏的。但是在单击某个使这个最内层 div 出现的事件后，父 div 必须通过设置自动高度来适应这些。但是绝对元素的问题，它们的尺寸不能影响父母的尺寸。你能告诉我如何使用 JavaScript 来实现这一点吗？谢谢。

<div class="parent">
    <table>
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row1<td>
                <td>row1<td>
            </tr>           
            <tr>
                <td>row2<td>
                <td>row2<td>
            </tr>   
            <tr>
                <td class="inner-div">
                    row3
                    <div class="inner-child">
                        <table>
                            <thead>
                                <tr>
                                    <th>col1</th>
                                    <th>col2</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>row1<td>
                                    <td>row1<td>
                                </tr>           
                                <tr>
                                    <td>row2<td>
                                    <td>row2<td>
                                </tr>   
                            </tbody>
                        </table>
                    </div>
                <td>
                <td>row3<td>
            </tr>                    
        </tbody>
    </table>
</div>

请看下图。

Answer 1

使用 jQuery，您可以使用 outerHeight() 并计算您需要的所有元素的高度。用https://api.jquery.com/css/设置高度父级后

Answer 2

必须使用position:absolute吗？

也许你可以使用 position: relative 到内部 div 的位置，它们会自动影响父级的大小。