使用javascript切換div的動態高度

現在我正在嘗試製作一個網站Portfolio，我遇到了問題。在鏈接頁面上會有相當多的內容，因此我研究並製作了將錨點和javascript結合在一起的側面標籤，以僅顯示選定的部分。我現在遇到的問題是，這個方法在內容很小的時候工作，但在我正在試驗的「編碼」部分，並且注意到當內容超過100％時，內容不會導致父div擴展。我知道這是由於顯示：無可用性。我試圖使用可見性：隱藏和切換，但問題是，然後總計內容的高度計算每個頁面，我不想要的。任何幫助都會很棒：D（ps。我不希望在可能的情況下使用jQuery）這是我的第一篇文章，所以我很抱歉，如果這是太多的信息，我只想盡我所能。使用javascript切換div的動態高度

HTML：

<html> 
    <head> 
     <title>Taylor Tomasini</title> 

     <!--[if IE]> 
      <link rel="stylesheet" type="text/css" href="../Style/IE_Stylesheet.css"/> 
     <![endif]--> 
     <![if !IE]> 
      <link rel="stylesheet" type="text/css" href="../Style/Stylesheet.css"/> 
     <![endif]> 

     <meta charset="utf-8"/> 
     <meta name="Author" content="Taylor Tomasini"/> 
     <meta name="Keywords" content="Aerospace, Engineer, Taylor Tomasini, Florida Tech, 
     FIT, Florida Institute of Technology, CAD, FEA, ProEngineer, ANSYS, AIAA, 
     Project Management, Leadership, C++, Web Design, Driven, Creative"/> 
     <meta name="Description" content="Professional Profile for the Aerospace Engineer Taylor Tomasini"/> 

     <?php 
     $page="Projects"; 
     ?> 

     <script type="text/javascript" src="../Style/Content_Format.js"></script> 
    </head> 

    <body onload="format()" onresize="format()"> 
     <header> 
      <h1>Taylor Tomasini</h1> 
      <nav id="Global_Menu" role="navigation"> 
       <ul class="Global_Nav"> 
       <?php 
       switch($page) 
       { 
        case("Home"): 
       ?> 
         <li><a href="/" class="active">Home</a></li> 
         <li><a href="/About/">About Me</a></li> 
         <li><a href="/Projects/">Projects</a></li> 
         <li><a href="/Qualifications/">Qualifications</a></li> 
         <li><a href="/Contact/">Contact</a></li> 
        <?php 
        break; 
        case("About"): 
        ?> 
         <li><a href="/">Home</a></li> 
         <li><a href="/About/" class="active">About Me</a></li> 
         <li><a href="/Projects/">Projects</a></li> 
         <li><a href="/Qualifications/">Qualifications</a></li> 
         <li><a href="/Contact/">Contact</a></li> 
        <?php 
        break; 
        case("Projects"): 
        ?> 
         <li><a href="/">Home</a></li> 
         <li><a href="/About/">About Me</a></li> 
         <li><a href="/Projects/" class="active">Projects</a></li> 
         <li><a href="/Qualifications/">Qualifications</a></li> 
         <li><a href="/Contact/">Contact</a></li> 
        <?php 
        break; 
        case("Qualifications"): 
        ?> 
         <li><a href="/">Home</a></li> 
         <li><a href="/About/">About Me</a></li> 
         <li><a href="/Projects/">Projects</a></li> 
         <li><a href="/Qualifications/" class="active">Qualifications</a></li> 
         <li><a href="/Contact/">Contact</a></li> 
        <?php 
        break; 
        case("Contact"): 
        ?> 
         <li><a href="/">Home</a></li> 
         <li><a href="/About/">About Me</a></li> 
         <li><a href="/Projects/">Projects</a></li> 
         <li><a href="/Qualifications/">Qualifications</a></li> 
         <li><a href="/Contact/" class="active">Contact</a></li> 
        <?php 
        break; 
        default: 
        ?> 
         <li><a href="/">Home</a></li> 
         <li><a href="/About/">About Me</a></li> 
         <li><a href="/Projects/">Projects</a></li> 
         <li><a href="/Qualifications/">Qualifications</a></li> 
         <li><a href="/Contact/">Contact</a></li> 
       <?php 
       break; 
       } 
       ?> 
       </ul> 
      </nav> 
     </header> 

     <div id="Wrapper"> 
      <div id="Left_Menu"> 
       <ul class="Left_Menu_Nav"> 
        <!--[if IE]> 
        <li><a href="#CAD">CAD</a></li> 
        <li><a href="#FEA">FEA</a></li> 
        <li><a href="#MATLAB">MATLAB</a></li> 
        <li><a href="#Coding">Coding</a></li> 
        <li><a href="#Arduino">Arduino</a></li> 
        <li><a href="#Artwork">Artwork</a></li> 
        <![endif]--> 

        <![if !IE]> 
        <li><a href="javascript:Display_Section('CAD');">CAD</a></li> 
        <li><a href="javascript:Display_Section('FEA');">FEA</a></li> 
        <li><a href="javascript:Display_Section('MATLAB');">MATLAB</a></li> 
        <li><a href="javascript:Display_Section('Coding');">Coding</a></li> 
        <li><a href="javascript:Display_Section('Arduino');">Arduino</a></li> 
        <li><a href="javascript:Display_Section('Artwork');">Artwork</a></li> 
        <![endif]> 
       </ul> 
      </div> 

      <div id="Content"> 
       <div id="CAD" name="Section"> 
        Computer Aided Design 
       </div> 
       <div id="FEA" name="Section"> 
        Finite Element Analysis 
       </div> 
       <div id="MATLAB" name="Section"> 
        MATLAB 
       </div> 
       <div id="Coding" name="Section"> 
        Coding 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        </br></br></br></br></br></br> 
        <p>hi</p> 
       </div> 
       <div id="Arduino" name="Section"> 
        Hardware/software interaction 
       </div> 
       <div id="Artwork" name="Section"> 
        Artwork 
       </div> 
      </div> 
     </div> 

     <footer> 
       <p>Created by: Taylor Tomasini</p>   
     </footer> 
    </body> 

</html>

CSS：

html, body 
{ 
    margin:0; 
    padding:0; 
    height:100%; 
    background:#ECECEC; 
} 

header 
{ 
    display:block; 
    width:100%; 
} 

header h1 
{ 
    text-align:center; 
} 

.Global_Nav 
{ 
    list-style-type:none; 
    font-size:150%; 
    border:0; 
    padding:0; 
    margin-left:5%; 
    margin-right:5%; 
} 

.Global_Nav li 
{ 
    float:left; 
    background:grey; 
    width:20%; 
    margin-bottom:1em; 
} 

.active 
{ 
    background:#4C4C4C; 
} 

.Global_Nav a 
{ 
    text-decoration:none; 
    display:block; 
    text-align:center; 
    font:2em; 
    border-right:1px solid #ECECEC; 
} 

.Global_Nav a:link, .Global_Nav a:visited 
{ 
    color:white; 
    font-weight:bold; 
    text-transform:uppercase; 
} 

.Global_Nav a:hover 
{ 
    background:black; 
} 

#Wrapper 
{ 
    display:block; 
    width:100%; 
    height:auto; min-height:100%; 
    background:clear; 
    overflow:hidden; 
} 

#Left_Menu 
{ 
    float:left; 
    height:auto; min-height:100%; 
    width:14%; 
    margin-left:7%; 
    background:grey; 
} 

.Left_Menu_Nav 
{ 
    list-style-type:none; 
} 

.Left_Menu_Nav li 
{ 
    background:black; 
    border-bottom:1px solid grey; 
} 

.Left_Menu_Nav a 
{ 
    text-decoration:none; 
    display:block; 
    font-size:1.5em; 
} 

.Left_Menu_Nav a:link, .Left_Menu_Nav a:visited 
{ 
    color:white; 
} 

#Content 
{ 
    float:right; 
    height:auto; min-height:100%; 
    width:68%; 
    margin-right:7%; 
    border:2px solid black; 
    background:white; 
} 

.Content_Heading 
{ 
    width:100%; 
    text-align:center; 
    background:grey; 
} 

.Content_Subheading 
{ 
    text-align:center; 
} 

.Content_Divider 
{ 
    float:left; 
    width:50%; 
} 

.Code_Box 
{ 
    border:black .15em solid; 
    position:relative; 
    left:5%; 
    width:90%; 
    color:green; 
    height:25em; 
    overflow:auto; 

} 

#CAD 
{ 
    display:block; 
} 

#FEA,#MATLAB,#Coding,#Arduino,#Artwork 
{ 
    display:none; 
} 

footer 
{ 
    clear:both; 
    display:block; 
    background: clear; 
    color: #565656; 
    font-size: .5em; 
    text-align: center; 
    height:2em; 
    width: 100%; 
}

的JavaScript：

function format() 
{ 
    //declare variables for wrapper, content, and side menu height 
    var Wrapper_Height = document.getElementById("Wrapper").offsetHeight; 
    var Center_Content = document.getElementById("Content"); 
    var Side_Menu = document.getElementById("Left_Menu"); 

    //set the content and side menu height 
    Center_Content.style.height = Wrapper_Height + "px"; 
    Side_Menu.style.height = Wrapper_Height + "px"; 
} 

function Display_Section(Current_Section) 
{ 
    var Array = document.getElementsByName("Section"); 
    for(var x=0; x<Array.length; x++) 
    { 
     if (Array[x].id == Current_Section) 
     { 
      Array[x].style.display = 'block'; 
     } 
     else 
     { 
      Array[x].style.display = 'none'; 
     } 
    } 
}

來源

2012-08-02 TaylorT

您的格式功能設定一個固定高度的父（＃內容）。所以它永遠不會和它的孩子一起成長。

你也可以使用（Content_Format.js：9）：

Center_Content.style.minHeight = Wrapper_Height + "px";

來源

2012-08-02 15:26:29 EricG

哇謝謝你，完美地解決了這個問題，我很抱歉，如果它是如此簡單，我還挺新的JavaScript的。這種解決方案使得中心內容部分變得非常棒，有沒有辦法讓側邊菜單變成與內容一樣高？我試圖使用：Side_Menu.style.height = Center_Content.style.height，但無濟於事 – TaylorT 2012-08-02 15:54:08

編輯：我想明白了，我只是在Display_Section函數中添加了一個類似的腳本，它工作。謝謝！ – TaylorT 2012-08-02 16:21:43

太好了。我會親自把左邊的菜單放在我想的'''父母'中，但我想你已經很好了。歡迎你，哈哈，祝你好運：D – EricG 2012-08-02 21:36:42

使用javascript切換div的動態高度

回答

相關問題