DIV高度不調整

嗨我有一個頁面的容器div（稱爲innercontent），並在其中我有一個名爲tabs2的div。選項卡2包含一個選項卡式導航，允許div內的內容（在選項卡2內）更改。 div內的內容各不相同，因此如果該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>

來源

2013-07-13 Matt9Atkins

您的內容區域絕對定位。所以他們不在盒子模型之外，這就是爲什麼這不起作用。你可以看看創建一個JavaScript功能，在選項卡更改應用正確的高度或看看修改你的風格，使他們不依賴於絕對定位 – TommyBs

他們必須是絕對的，因爲他們是每個按下的標籤 – Matt9Atkins

你確定他們是絕對的？因爲我不認爲他們需要be.You可以看看使用諸如jqueryui http://jqueryui.com/tabs/

或者，修改您的html，它應該更容易.Essentially移動的內容divs之外，但有一個數據屬性將它們鏈接到一個特定的鏈接。我假設您目前使用一些js來操縱顯示和隱藏，因爲您目前具有可見性：隱藏。我改變了這個顯示：在我的例子中沒有（因爲可見性仍然佔據文檔中的空間，當用戶點擊一個鏈接時，默認隱藏所有的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; 
}

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

});

來源

2013-07-13 13:45:54 TommyBs

林沒有使用任何JS，說實話，我想遠離它 – Matt9Atkins

第一變化 ::不要顯示任何高度.tab2..it將採取對應於它包含

第二變化的項目自動高度：所做position:absolute;並期待它是dynamic..how可以成爲possible.remove它..要麼position:relative;或更好的選擇是更不用說position屬性在...您可以使用margin-left:100px;來定位您的div

來源

2013-07-13 13:49:35

DIV高度不調整

回答

相關問題