Div高度自動問題

Question

我有一個#val容器div伸展以容納稱爲＃cat-container的div內的Javascript內容。

cat-container上面有4個選項卡，編號爲1 - 4，所以如果你點擊1，它將加載來自php數組的內容，以及類似的選項卡2 -3。

當您單擊每個選項卡時，＃val-container成功拉伸到正確的高度，但是我已經設置了選項卡1及其內容，以便在頁面加載時默認顯示。問題是來自所有其他選項卡的內容被加載到選項卡1的onpage負載中。

<script type="text/javascript"> 
var i=1; 
var tab; 
document.getElementById('cat-container').style.position='relative'; 
document.getElementById('val-container').style.height='auto'; 
while(tab=document.getElementById('option'+i+'-body')) 
{ 
    tab.style.position='absolute'; 
    tab.style.top='0'; 
    tab.style.left='0'; 
    i++; 
} 
var urllocation = location.href; //find url parameter 
if(urllocation.indexOf("#") == -1) 
{ 
    displayTab(1); 
} 
else 
{ 
    if(urllocation.indexOf("#option1")>-1)displayTab(1); 
    else if(urllocation.indexOf("#option2")>-1)displayTab(2); 
    else if(urllocation.indexOf("#option3")>-1)displayTab(3); 
    else if(urllocation.indexOf("#option4")>-1)displayTab(4); 
    else displayTab(1); 
} 
</script> 

本質上我想要選項卡1只顯示頁面加載時的內容。

這行是問題的方法：

的document.getElementById（ 'VAL-容器'）style.height = '自動';

因此，如果顯示其內容！

實際顯示選項卡上的代碼：

<script type="text/javascript"> 
function displayTab(num) 
{ 
    var tab,x; 
    x=1; 
    while(tab=document.getElementById('option'+x+'-body')) 
    { 
     if(num!=x)tab.style.display='none'; 
     else tab.style.display='inherit'; 
     x++; 
    } 
} 
</script> 

<div class="category-tab" id="aoption1"><a href="#option1" onclick="displayTab(1);return false;">Tab1</a></div> 
<div class="category-tab" id="aoption2"><a href="#option2" onclick="displayTab(2);return false;">Tab2</a></div> 
<div class="category-tab" id="aoption3"><a href="#option3" onclick="displayTab(3);return false;">Tab3</a></div> 
<div class="category-tab" id="aoption4"><a href="#option4" onclick="displayTab(4);return false;">Tab4</a></div> 
<br><br> 

這裏是PHP/HTML：

我用標籤1 - 4把事情簡單化，但實際上他們所代表的價格範圍：

echo "<div id=\"cat-container\">"; 
echo '<div id=\"val-contain\">'; 

$cats=array(0,1000,5000,10000,100000); 
for($ci=1;$ci<count($cats);$ci++) 
{ 
    if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over &pound;100!</h3></a>"; 
    else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>"; 
    $i=0; 
    for ($p = 0; $p < count($game); $p++) 
    { 
     $game[$p]->getProduct(); 
     if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1]) 
     { 
      if (($i % 3) == 0) 
      { 
       if($i)echo "</tr></table>"; 
       echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>"; 
      } 

      echo "<td>"; 
      $game[$p]->getLink(); 
      echo $game[$p]->link; 
      echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>"; 
      echo "<div class=\"container\" style=\"text-align:center;\"><div  class=\"image-spacer\">"; 
      echo $game[$p]->getImage(); 
      echo $game[$p]->image; 
      echo "</div>"; 
      echo "<div class=\"specialprice\" >"; 

      if(!is_numeric($game[$p]->price)){ 
       echo $game[$p]->price; 
      } 
      else 
      { 
       if($game[$p]->price < $game[$p]->maxprice) 
       {echo "From only: &pound;".fixedtofloat($game[$p]->price);} 
       else 
       {echo "Only: &pound;".fixedtofloat($game[$p]->price);} 
      } 
      echo "</div></div></a>"; 
      echo "</td>"; 
      $i++; 
     } 
    } 
    echo "</tr></table></div>"; 
} 
echo "</div>"; 
echo '</div>'; 
    ?> 

CSS：

#val-contain { } 
#cat-container { } 
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;} 
.category-tab a { color:white; } 
.category-tab a:hover { color:#white; } 
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;} 
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;} 
.container { background-color:white; } 
.imgpad { margin-bottom: 10px; } 
.vallinks {color: #c50f07; font-weight: bold; } 

希望有人能幫忙嗎？

Volterony

Answer 1

這是一個靜態標籤純的HTML /內聯CSS溶液。

<body> 
    <style> 
     html{ 
      height: 100%; 
     } 
     body { 
      min-height: 100%; 
     } 
    </style> 

    <div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block"> 

     <div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1); 
      return  false;">Tab1</a></div> 
     <div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2); 
      return false;">Tab2</a></div> 
     <div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3); 
      return false;">Tab3</a></div> 
     <div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4); 
      return false;">Tab4</a></div>  
    </div> 


    <div style="max-height: 95%;min-height: 95%; background-color: red;display: block"> 
     Tab 1 content 
    </div> 

</body> 

Answer 2

你用 'VAL-包含' 作爲您的div的ID

echo '<div id=\"val-contain\">'; 

，但你試圖用

document.getElementById('val-container').style.height='auto'; 

的變化而變化的div的id爲val容器。