0

我有一个 3 个选项卡式菜单，每个菜单在同一页面中显示它自己的内容。

我在使用溢出“隐藏”时遇到问题，直到这里有人指出要使用它，我需要在 div 上设置一个高度。

这很好用。

但是，由于每个选项卡下的内容长度不同，因此设置高度对我没有好处，相反高度需要是动态的。

我尝试将高度设置为 100%，但没有运气（正如您将在此处看到的，回到根本不显示内容的原始问题）http://jsfiddle.net/UcqfA/7/

我还尝试将 min-height 设置为 945px（这是 3 个选项卡中所需的最低高度），但这似乎忽略了最小值并保持在 945 px 的静态高度，无论我正在查看哪个选项卡的内容。

谁能建议我如何使 div 动态化，以便高度始终适应内容？

上面JSFIDDLE中使用的代码

<div class="cont-wrapper">
<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>


.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
}
.tabs {
width: 980px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 20px auto;
}
  .tabs li{
    float: left;
  }
.tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  .tabs label:hover {
    background: rgba(255,255,255);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #08C;
    padding: 15px;
    color: #4a4949;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }
  .cont-wrapper{
    width: 980px;
    background: #82cff5;
    padding-right: 20px;
    padding-left: 20px;
overflow:hidden;
height:100%;
  }
4

1 回答 1

1

您错过了设置父类的高度cont-wrapper，将其添加到您的 css 中：

demo 

html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
于 2014-02-04T12:14:31.370 回答