html - 如何让 div 随内容增长而不覆盖其他内容

Question

我有一个用于 html/css 标签的代码。不幸的是，它滚动的内容太长了。因为我事先不知道我的文本会有多长，所以我希望文本 div 随着内容的增长而增长。

我觉得问题应该出在position: absolute;但是当我将其更改为相对(甚至只是 div，而不是输入)时，选项卡被破坏并且整个文本 div 覆盖了页面的其他内容。

我的完整示例在这里:http://jsfiddle.net/0f8hno5o/

这里是一些部分:

<div class="tabreiter">
   <ul>
       <li>
           <input type="radio" name="tabreiter-0" checked="checked" id="tabreiter-0-0" /><label for="tabreiter-0-0">Tab 1</label>
            <div>
                 Long Text ...
            </div>
       </li>
    </ul>
</div>

我的部分 CSS:

.tabreiter
{
    width: 100%;
    height: 220px;
}   

.tabreiter ul,
.tabreiter li
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabreiter,
.tabreiter input[type="radio"]:checked + label
{
    position: relative;
}

.tabreiter li,
.tabreiter input[type="radio"] + label
{
    display: inline-block;
}

.tabreiter li > div ,
.tabreiter input[type="radio"]
{
    position: absolute;
}

Answer 1

我认为仅使用 html/css 是不可能的，因此我认为您需要一些 javascript/jquery。 (我将编写一小段 jQuery，但如果您不使用它，则必须将其重写为纯 javascript)

我会将它卡在单选按钮的更改事件上，因为您的选项卡可以与这些按钮一起使用。 此外，您将不得不稍微更改选项卡的代码，否则我认为 jquery 无法计算出内容的高度。

<div class="tabreiter">
   <ul>
       <li>
           <input type="radio" name="tabreiter-0" checked="checked" id="tabreiter-0-0" /><label for="tabreiter-0-0">Tab 1</label>
            <div>
                <div> <!-- added extra div which will have the height we need -->
                     Long Text ...
                </div>
            </div>
       </li>
    </ul>
</div>

jQuery:

<script>
//being extra specific here because I don't know if you've got other radio buttons on the page somewhere
$('.tabreiter ul li input[type=radio]').on('change', function() {

    //calculate height of contents:
    // you'll need to add the height of the tabs + the margins /top offsets set by your css, I haven't checked them precisely so these are rough estimates
    var newHeight = $(this).parent('li').find('div>div').height() + 34 + 16 + 38;

    set the height of the container div to match the newly calculated height
    $('.tabreiter').height(newHeight);

});

//this triggers the change function to set correct height on page load
$('.tabreiter ul li input[type=radio]:checked').change();
</script>