个人中心
gpt4 book ai didi

javascript - 使用javascript切换div的动态高度

转载 作者：行者123 更新时间：2023-11-28 18:39:51 24 4
gpt4 key购买 nike

现在我正在尝试制作一个网站Portfolio我遇到了问题。在链接的页面上会有很多内容，所以我研究并制作了侧边标签，结合了 anchor 和 javascript 以仅显示选定的部分。我现在遇到的问题是当内容很小时这种方法有效，但在“编码”部分我正在试验并注意到当内容超过 100% 时内容不会导致父 div 扩展。我知道这是由于显示:无可用性。我尝试使用 visibility:hidden 并切换它，但问题是然后为我不想要的每个页面计算总内容的高度。任何帮助都会很棒 :D(附注:如果可能的话，我不希望使用 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';
        }
    }
}

最佳答案

您的格式函数为父项 (#Content) 设置了固定高度。所以它永远不会随着它的 child 一起变大。

您可以改用 (Content_Format.js:9):

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

关于javascript - 使用javascript切换div的动态高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11780567/

24 4 0
文章推荐： javascript - Highchart 范围选择器文本框的奇怪行为。
文章推荐： iOS:将名称存储在 plist 中
文章推荐： iphone - 如何更改通用的uibarbutton颜色
文章推荐： css - 在 A4 纸上打印 css A6
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com