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操纵显示和隐藏，因为你目前有可见性：隐藏。我已将此更改为显示：在我的示例中为none（因为可见性仍占用文档中的空间。当用户单击链接时，默认隐藏所有div，然后显示具有正确匹配数据属性的那个。

我在http://jsfiddle.net/9bH7s/创建了一个小提琴，显示了这个，代码在下面。

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();

});

Answer 2

第一次更改 ::不要指出.tab2..it的任何高度将采用与其包含的项目相对应的自动高度

第二次更改：您已经position:absolute;并希望它是dynamic.how，这是可能的。删除它......要么让position:relative;或更好的选择是更不用说position属性了......您可以使用margin-left:100px;来定位div

DIV高度没有调整大小

2 个答案: