如何将侧面板高度同步到动态高度？

Question

当我的 div 内容变大时，我的侧面板高度没有扩展。我已将高度设置为 100%，它在移动视图中工作正常，但在桌面视图中，有时我的侧边栏高度没有增加，因为它是固定的。但是我希望这个高度随着我 div 的内容而动态变化。这是我的全部代码：JSFiddle

在这里你可以看到，如果你点击导航栏，它会打开栏，在下面你会看到侧边栏和 div 内容不在同一高度。这就是我遇到的问题：

我想要扩展边栏。我该如何解决这个问题？我只能说我必须更改此 css class 的高度，但如何更改？:

.sidepanel {
    height: 100%; 
    width: 0; 
    position: absolute; 
    z-index: 1;
    left: 0;
    background-color: #221F20; 
    overflow-x: hidden; 
    padding-top: 40px; 
    transition: 0.3s;
}

Answer 1

位置应该固定。

top 0 属性解决了 space 问题。

在导航中添加了开关，以便在它打开时进行切换，您只需根据需要重新设置导航中的开关样式即可。

.sidepanel {
    height: 100%;
    top: 0;
    width: 0;
    position: fixed;
    z-index: 9999;
    left: 0;
    background-color: #221F20;
    overflow-x: hidden;
    padding-top: 40px;
    transition: 0.3s;
}



    <div class="navbar" >

        <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
        <p>
        user
        </p>

    </div>
 <div class="sidepanel">
     <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
    <!-- General panel -->
    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>

</div>

<div class="container-fluid px-5 mt-2" id="main">

    <div class="row py-4">
        <div class="col-md-6 page-title-div">
            <div class="page-header">
                  <h2>HTML</h2>
            </div>
        </div>
    </div>

    <div class="row card py-4 rounded">


        <div class="col-md-6 page-title-div">
            <div>
                  <p>In HTML, there are two main types of lists:
                    unordered lists (<ul>) - the list items are marked with bullets
                    ordered lists (<ol>) - the list items are marked with numbers or letters
                    The CSS list properties allow you to:

                    Set different list item markers for ordered lists
                    Set different list item markers for unordered lists
                    Set an image as the list item marker
                    Add background colors to lists and list items
                    </p>
            </div>
        </div>


    </div>

</div>

Answer 2

如果您将 position: relative 添加到您的 body，您的问题应该得到解决。

$(document).ready(function() {
    //sidepanel navigation
    $(".toggleButton").on("click", function() {
        if ($(".sidepanel").css("width") == "0px") {
            var mainWidth = $("#main").width() - 256;
            $(".sidepanel").css("width", `15%`);
            $("#main").css("margin-left", `15%`);
            $("#main").css("width", `85%`);
        } else {
            $(".sidepanel").css("width", "0%");
            $("#main").css("margin-left", "0%");
            $("#main").css("width", "100%");
        }
    });

    //menu item navigation
    $(".menuItem").on("click", function() {

        // if this menuitem is collapsed
        if ($(this).next().css("height") == "0px") {

            // turning off all other menu items except for this
            $(".menuItem").not($(this)).next("div").css("height", "0px");
            $(".menuItem").not($(this)).removeClass("openAnchor");
            $(".menuItem").not($(this)).addClass("collapsedAnchor");

            // turning off all sub menu items except for this
            $(".subMenuItem").next("div").css("height", "0px");
            $(".subMenuItem").removeClass("openAnchor");
            $(".subMenuItem").addClass("collapsedAnchor");


            // substituting collapsed class for open class
            $(this).removeClass("collapsedAnchor");
            $(this).addClass("openAnchor");


            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            $(this).next("div").css("height", `${height}px`);

        } else {
            $(this).removeClass("openAnchor");
            $(this).addClass("collapsedAnchor");
            $(this).next("div").css("height", "0px");
        }
    });

    // sub menu item navigation
    $(".subMenuItem").on("click", function() {

        // if this menuitem is collapsed
        if ($(this).next().css("height") == "0px") {

            // accesing sibling open anchor
            var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;
            var heightToDeduce = 37 * openAnchorChildNumber;
            console.log(heightToDeduce);
            // turning off all other sub menu items except for this
            $(".subMenuItem").not($(this)).next("div").css("height", "0px");
            $(".subMenuItem").not($(this)).removeClass("openAnchor");
            $(".subMenuItem").not($(this)).addClass("collapsedAnchor");


            // substituting collapsed class for open class
            $(this).removeClass("collapsedAnchor");
            $(this).addClass("openAnchor");


            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            $(this).next("div").css("height", `${height}px`);
            var parentHeight = $(this).parent().height() + height - heightToDeduce;
            $(this).parent().css("height", `${parentHeight}px`);


        } else {
            $(this).removeClass("openAnchor");
            $(this).addClass("collapsedAnchor");
            $(this).next("div").css("height", "0px");
            var numberOfChildren = $(this).next("div").find("> a").length;
            var height = 37 * numberOfChildren;
            var parentHeight = $(this).parent().height() - height;
            $(this).parent().css("height", `${parentHeight}px`);
        }
    });

});

body {
  position: relative;
}

/* The sidepanel menu */
.sidepanel {
    height: 100%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: absolute; /* Stay in place */
    z-index: 1;
    left: 0;
    background-color: #221F20; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.3s;
}

.sidepanel .collapsedAnchor::after {
    font-family: 'Font Awesome 5 Free';
    float: right;
    font-weight: 900;
    content: "\f054";
}
.sidepanel .openAnchor::after {
    font-family: 'Font Awesome 5 Free';
    float: right;
    font-weight: 900;
    content: "\f078";
}

/* The sidepanel links */
.sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #B7B6B8;
    display: block;
    transition: 0.3s;
    font-size: 13px;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
    color: #FFFFFF;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

a.menuItem i.fa{
    font-size: 15px;
}

#main {
    transition: margin-left 0.5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

.sidepanel .subMenus {
    padding-left: 3%;
    /* position: fixed; */
    overflow-y: hidden;
    transition: 0.5s;
}

.subMenus a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-size: 13px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="navbar" >

        <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
        <p>
        user
        </p>

    </div>
 <div class="sidepanel">
    
    <!-- General panel -->
    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>

</div>

<div class="container-fluid px-5 mt-2" id="main">

    <div class="row py-4">
        <div class="col-md-6 page-title-div">
            <div class="page-header">
                  <h2>HTML</h2>
            </div>
        </div>
    </div>

    <div class="row card py-4 rounded">


        <div class="col-md-6 page-title-div">
            <div>
                  <p>In HTML, there are two main types of lists:
                    unordered lists (<ul>) - the list items are marked with bullets
                    ordered lists (<ol>) - the list items are marked with numbers or letters
                    The CSS list properties allow you to:
                    
                    Set different list item markers for ordered lists
                    Set different list item markers for unordered lists
                    Set an image as the list item marker
                    Add background colors to lists and list items
                    </p>
            </div>
        </div>


    </div>

</div>

如何将侧面板高度同步到动态高度？

How to synchronize side-panel height to dynamic height?

html

css

css-position

bootstrap-4