Как синхронизировать высоту боковой панели с динамической высотой c? - PullRequest
0 голосов
/ 06 апреля 2020

Высота моей боковой панели не увеличивается, когда содержимое моего div увеличивается. Я задал высоту до 100%, она отлично работает для мобильного просмотра, но для рабочего стола иногда высота моей боковой панели не увеличивается, поскольку она зафиксирована. Но я хочу, чтобы эта высота была динамичной с содержанием моего div. Это весь мой код: JSFiddle

Здесь вы можете увидеть, что если вы нажмете на панель навигации, она откроет панель, а внизу вы увидите, что боковая панель и содержимое div не отображаются в такой же высоты. Вот проблема, которую я получаю:

enter image description here

Я хочу расширить боковую панель. Как я могу решить это? Все, что я могу сказать, что я должен изменить высоту этого css класса, но как?:

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

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

если вы добавите position: relative к своему телу, ваша проблема должна быть решена.

$(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>
0 голосов
/ 06 апреля 2020

позиция должна быть исправлена.

свойство top 0 решило проблему с пробелом.

добавлен тумблер внутри навигационной панели, чтобы переключать его, когда он открывается, вам нужно только изменить стиль тумблера, который находится внутри навигация, если вы sh.

.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>



...