1

今私はウェブサイトのポートフォリオを作ろうとしていますそして私は問題にぶつかっています。リンクのページにはかなりの量のコンテンツが含まれるため、アンカーとJavaScriptを組み合わせて、選択したセクションのみを表示するサイドタブを調査して作成しました。私が今直面している問題は、この方法がコンテンツが小さいときに機能することですが、「コーディング」セクションで実験してみたところ、コンテンツが100％を超えると、コンテンツによって親divが拡張されないことがわかりました。私はこれがdisplay：noneの使いやすさによるものであることを知っています。私はvisibility：hiddenを使用してそれを切り替えようとしましたが、問題は、必要のないページごとにコンテンツ全体の高さが計算されることです。どんな助けでも素晴らしいでしょう：D（ps。

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';
        }
    }
}
4

1 に答える 1

1

format関数は、固定の高さを親（#Content）に設定します。したがって、子と一緒にサイズを変更することはありません。

代わりに使用できます（Content_Format.js：9）：

Center_Content.style.minHeight = Wrapper_Height + "px";
于 2012-08-02T15:26:29.850 に答える