css - DIV 高度不调整大小

Question

您好，我有一个页面容器 div(称为 innercontent)，其中有一个名为 tabs2 的 div。 Tabs2 包含一个选项卡式导航，允许更改 div 内的内容(在 tab2 内)。 div 中的内容各不相同，因此如果该 div 中的内容很多，高度应该自行扩展。问题是当更改内容区域中的选项卡时，div 不会自动调整大小，因此无法看到内容。这是代码:

CSS:

.innercontent {
    overflow: hidden;
    background-color:#FFF;
    padding:24px 30px;
    border-radius:5px;
}

#tabs2 {
    width: 100%;
    height:100%;
}

.div2 {
    position: absolute;
    visibility: hidden;
    width: 100%;
    left: 0;
}

HTML:

<div id="tabs2">
    <ul>
        <li id="One"><a href="#One" id="first">One</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
        <li id="Two"><a href="#Two" id="sec">Two</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
        <li id="Three"><a href="#Three" id="third">Three</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
    </ul>
</div>

Answer 1

你确定它们必须是绝对的吗？因为我认为他们不需要。你可以看看使用诸如 jqueryui http://jqueryui.com/tabs/ 之类的东西。

或者，修改您的 html，它应该更容易。基本上将内容 div 移到外部，但具有将它们链接到特定链接的数据属性。我假设您现在使用一些 js 来操纵显示和隐藏，因为您当前具有 visibility:hidden。在我的示例中，我将其更改为显示:无(因为可见性仍然占据文档中的空间。当用户单击链接时，默认情况下隐藏所有 div，然后显示具有正确匹配数据属性的那个。

我在 http://jsfiddle.net/9bH7s/ 创建了一个 fiddle 显示了这一点，代码如下。

html

  <div class="innercontent">
<div id="tabs2">
<ul>
    <li id="One"><a href="#One" id="first">One</a>

    </li>
    <li id="Two"><a href="#Two" id="sec">Two</a>

    </li>
    <li id="Three"><a href="#Three" id="third">Three</a>

    </li>
</ul>
 <div class="div2" data-id="first">
            <p>Insert content here</p>
        </div>
  <div class="div2" data-id="sec">
            <p>Insert content here</p>
        </div>
         <div class="div2" data-id="third">
            <p>Insert content here this has a lot more <br /><br />and some more content</p>
        </div>
</div>
</div>

CSS

.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}

#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}


.div2 {
display:none;
width: 100%;
clear:both;
}

js

$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();

});