如何让div随内容一起增长，而不是覆盖其他内容

我有一个html/css标签的代码。不幸的是，它滚动的内容太长。由于我事先不知道，我的文本会保留多久，我希望文本div随内容一起增长。如何让div随内容一起增长，而不是覆盖其他内容

我认为问题应该是这样的：绝对的;但是当我将其更改为相对（即使只是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; 
}

来源

2015-10-31 alexandre

这可能是一个有用的源代码，看看它是如何解决：http://codepen.io/JamieKDonnelly/pen/wBQQPK –

我不认为这是可能只有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>

来源

2015-10-31 21:31:14 Vincent

哇，谢谢你的努力！奇迹般有效！ – alexandre

如何让div随内容一起增长，而不是覆盖其他内容

回答

相关问题