Question

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

我认为问题应该是这个位置：绝对;但当我将其更改为相对（即使只是div，而不是输入）时，标签会被破坏，整个文本div会覆盖页面的其他内容。

这里有一些部分：

<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>

如何让div与内容一起成长，而不是放在其他内容上

1 个答案: