자바 스크립트를 사용하여 toggled div의 동적 높이

지금 웹 사이트를 만들려고합니다. Portfolio 그리고 문제가 있습니다. 링크의 페이지에는 꽤 많은 내용이 있으므로 앵커와 자바 스크립트를 결합하여 선택한 섹션 만 표시하는 사이드 탭을 만들었습니다. 지금 실행하고있는 문제는 콘텐츠가 작을 때이 방법이 작동하지만 "코딩"섹션에서 콘텐츠가 100 % 이상일 때 콘텐츠가 부모 div를 확장시키지 않는다는 것을 실험하고 주목하고 있다는 것입니다. 나는 이것이 디스플레이 때문인 것을 알고 있습니다 : 유용성 없음. 나는 가시성을 사용하려고 시도했다. : hidden과 toggle,하지만 문제는 그때 총 콘텐츠의 높이가 내가 원하지 않는 각 페이지에 대해 계산된다는 것이다. D 조 (추신 : 가능한 경우 jQuery를 사용하고 싶지 않습니다.) 이것은 내가 할 수있는 한 많이주고 싶었던 정보가 너무 많아서 유감스럽게 생각합니다.자바 스크립트를 사용하여 toggled 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%; 
}

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)에 고정 된 높이를 설정합니다. 그래서 그 아이와 함께 결코 크기가 없습니다.

대신 사용할 수 있습니다 (Content_Format.js : 9) :

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

출처

2012-08-02 15:26:29 EricG

와우 내가 자바 스크립트에서 좀 새로운 오전 그렇게 단순한 있었다면 죄송 메신저, 완벽 그 문제를 해결 그, 감사합니다. 이 솔루션은 센터 콘텐츠 섹션을 멋지게 만듭니다. 사이드 메뉴를 콘텐츠와 동일한 높이로 만들 수있는 방법이 있습니까? 나는 사용을 시도했다 : Side_Menu.style.height = Center_Content.style.height 그러나 아무 소용이 – TaylorT

편집 : 나는 그것을 꺼내 알았는데, 나는 방금 Display_Section 함수에 유사한 스크립트를 추가했다. 고맙습니다! – TaylorT

좋습니다. 개인적으로 'the'부모님이 생각한 왼쪽 메뉴를 개인적으로 넣겠지만, 이미 괜찮다고 생각합니다. 당신은 환영과 행운을 환영합니다 : D 조 – EricG

자바 스크립트를 사용하여 toggled div의 동적 높이

답변

관련 문제