当列表位于div内时，css选项卡式菜单内容不显示

我有一个div，里面有一个选项卡式菜单列表，当我选择任何选项卡时，内容应该显示在同一页面中

如果没有div（就像列表一样），它可以正常工作，但是使用div时，内容根本不会出现

我相信这不会太难，但我就是看不出问题所在

有人能提供建议吗

工作HTML：

<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab1">
      <label for="tab1">tab 1</label>
      <div id="tab-content1" class="tab-content animated fadeIn">
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">tab 2</label>
      <div id="tab-content2" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab3">
      <label for="tab3">tab 3</label>
      <div id="tab-content3" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
</ul>

有问题的CSS位：

 .cont-wrapper{
    width: 980px;
    background: #82cff5;
    padding-right: 20px;
    padding-left: 20px;
overflow:hidden;
  }

---

您没有在

div

上设置高度，并且

overflow

被设置为

hidden

，因此选项卡下方没有可见的内容。在

div.cont-wrapper上设置一个高度应该可以解决这个问题。
看起来您没有看到内容，因为您有
溢出：隐藏在包含元素上。这将隐藏试图在
.cont包装器

我会将选项卡与复制块分开放在一个单独的div中，这样会更容易

CSS:

.cont包装器{
//其他风格
溢出：隐藏；//设置高度成功了，我知道这很明显！谢谢，问题是每个选项卡下的内容长度不同，因此高度需要动态。我尝试将高度设置为100%，但没有成功，因为这似乎没有任何效果。再次检查有问题的JSFIDLE）以查看
高度：100% .CONT包装器< /C>是你的小提琴中有一个高度的最高元素，100%不能工作。如果你删除<代码>溢出：隐藏< /代码>，一切看起来都很好。如果你需要更多的帮助，考虑用另一个FIDD发布另一个问题。乐
 .cont-wrapper{
    width: 980px;
    background: #82cff5;
    padding-right: 20px;
    padding-left: 20px;
overflow:hidden;
  }

   .cont-wrapper{
    //other styles
    overflow:hidden; // <- remove this entry
   }