Question

现在我正在尝试建立一个网站Portfolio而我遇到了一个问题。在链接的页面上会有相当多的内容，所以我研究并制作了侧边标签，它们结合了锚点和javascript，只显示选定的部分。我现在遇到的问题是，当内容很小时，此方法有效，但在“编码”部分我正在进行实验，并注意到当内容超过100％时，内容不会导致父div扩展。我知道这是由于显示：没有可用性。我试图使用可见性：隐藏和切换，但问题是，然后计算每个我不想要的页面的总内容的高度。任何帮助都会很棒：D（ps。如果可能，我不想使用jQuery）这是我的第一篇文章，所以如果这是我想要尽可能多的信息，我很抱歉。

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

Answer 1

您的格式化函数将固定高度设置为父级（#Content）。所以它永远不会跟孩子一起大小。

您可以改为使用（Content_Format.js：9）：

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

使用javascript切换div的动态高度

1 个答案: