Определите элемент, который прокручивается для удаления свойств

Question

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

<div class="container-fluid rightie">
    <button type="button" id="cart" class="btn btn-link rightee">
        <i class="fa fa-cart-plus" aria-hidden="true"></i>
    </button>
</div>
<div class="wrapper">
    <nav id="sidebar">
        <div class="sidebar-header">
            <p class="lead">Reap</p>
            <img class="image" id="blah" [src]="imageSrc || '../../../assets/profile.png'" alt="my image" />
        </div>
        <ul class="list-unstyled components">
            <p class="newer" role="button" routerLink="/profile">Username</p>
            <li>
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Produce</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a class="smaller" id="myproducts" (click)="myproducts()">MyProducts</a>
                    </li>
                    <li>
                        <a class="smaller" id="addproducts" (click)="addproducts()">Add Products</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Purchase</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a class="smaller" id="farmingproduce" (click)="farmingproduce()">Farm Produce</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingtools" (click)="farmingtools()">Farming Tools</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingequipment" (click)="farmingequipment()">Farming Equipment</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingchemicals" (click)="farmingchemicals()">Farming Chemicals</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu0" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Farm Orders</a>
                <ul class="collapse list-unstyled" id="pageSubmenu0">
                    <li>
                        <a class="smaller" id="farmpendingorders" (click)="farmpendingorders()">
                           Farm Pending Orders
                       </a>
                    </li>
                    <li>
                        <a class="smaller" id="farmfulfilledorders" (click)="farmfulfilledorders()">
                            Farm Fulfilled Orders
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="farmallorders" (click)="farmallorders()">
                            All Farm Orders
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Orders</a>
                <ul class="collapse list-unstyled" id="pageSubmenu1">
                    <li>
                        <a class="smaller" id="pendingorders" (click)="pendingorders()">
                           Pending Orders
                       </a>
                    </li>
                    <li>
                        <a class="smaller" id="fulfilledorders" (click)="fulfilledorders()">
                            Fulfilled Orders
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="allorders" (click)="allorders()">
                            All Orders
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pricing</a>
                <ul class="collapse list-unstyled" id="pageSubmenu2">
                    <li>
                        <a class="smaller" id="percounty" (click)="percounty()">
                            Per County
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="perproduct" (click)="perproduct()">
                            Per Product
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">About</a>
                <ul class="collapse list-unstyled" id="pageSubmenu3">
                    <li>
                        <a class="smaller" id="aboutus" (click)="aboutus()">
                            About Us
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="moreinfo" (click)="moreinfo()">
                            More Info
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <div id="content">
        <nav class="navbar navbar-expand-lg abs">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-outline-light">
                    <i class="fas fa-align-left"></i>
                </button>
            </div>
        </nav>
        <div class="reap" *ngIf="jumbo == 0 || jumbo > 15 || jumbo < 0">
            <app-my-products></app-my-products>
        </div>
        <div class="reap" *ngIf="jumbo == 1">
            <app-add-products></app-add-products>
        </div>
        <div class="reap" *ngIf="jumbo == 2">
            <app-farm-produce></app-farm-produce>
        </div>
        <div class="reap" *ngIf="jumbo == 3">
            <app-farming-tools></app-farming-tools>
        </div>
        <div class="reap" *ngIf="jumbo == 4">
            <app-farming-equipment></app-farming-equipment>
        </div>
        <div class="reap" *ngIf="jumbo == 5">
            <app-farming-chemicals></app-farming-chemicals>
        </div>
        <div class="reap" *ngIf="jumbo == 6">
            <app-farm-pending-orders></app-farm-pending-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 7">
            <app-farm-fulfilled-orders></app-farm-fulfilled-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 8">
            <app-all-farm-orders></app-all-farm-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 9">
            <app-pending-orders></app-pending-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 10">
            <app-fulfilled-orders></app-fulfilled-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 11">
            <app-all-orders></app-all-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 12">
            <app-per-county></app-per-county>
        </div>
        <div class="reap" *ngIf="jumbo == 13">
            <app-per-product></app-per-product>
        </div>
        <div class="reap" *ngIf="jumbo == 14">
            <app-about-us></app-about-us>
        </div>
        <div class="reap" *ngIf="jumbo == 15">
            <app-more-info></app-more-info>
        </div>
    </div>
</div>

вот ссылка для справки``, это только происходит на мобильном устройстве [элемент с ошибкой] [1] https://reaphoster.web.app/farmerparent

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
.wrapper {
    display: flex;
    align-items: stretch;
    /*bottom: 0;*/
    height: 100vh;
    overflow: hidden;
}

.limbo {
    margin-left: 50%;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    bottom: 0;
    background-image: linear-gradient(to right, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
    min-height: 100vh;
    /*bottom: 0;*/
    overflow-y: scroll;
}

.filing {
    height: 30px;
    border-radius: 40%;
    width: 200px;
    max-width: 200px;
}

.image {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
}

.newer:hover {
    background-image: linear-gradient(to bottom, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

#sidebar.active {
    margin-left: -250px;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
        margin-bottom: 0px;
        padding-bottom: 0px;
        overflow: hidden;
    }
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    /*background: #7386D5;*/
    color: rgb(146, 145, 145);
    transition: all 0.3s;
}

::-webkit-scrollbar {
    width: 2px;
}


/* Track */

 ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 1px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 1px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.fa {
    float: right;
    position: initial;
}

#sidebar .sidebar-header {
    padding: 20px 20px 0px 20px;
    /*background: #6d7fcc;*/
}

#sidebar ul.components {
    padding: 0px 0px 20px 0px;
    /*border-bottom: 1px solid #47748b;*/
}

.lead {
    text-align: center;
}

#sidebar ul p {
    color: rgb(146, 145, 145);
    padding: 10px;
    padding-left: 20px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    padding-left: 20px;
}

#sidebar ul li a:hover {
    /*color: #7386D5;*/
    /*background: rgb(121, 172, 238);*/
    background-image: linear-gradient(to bottom, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: rgb(146, 145, 145);
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
    /*background: #6d7fcc;*/
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
}

#cart {
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

.rightie {
    float: right;
    position: absolute;
}

.btn {
    color: rgb(167, 167, 167);
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

.rightee {
    float: right;
    position: relative;
    margin-top: 8px;
}

.abs {
    position: absolute;
}

.content {
    position: relative;
    width: 100%;
}

#content {
    max-width: 100%;
    max-height: 100%;
}


  [1]: https://reaphoster.web.app/farmerparent

Answer 1

Попробуйте установить фиксированное положение боковой панели навигации.

nav {
    position: fixed;
    z-index: 1;
    background-color: white;
}

Также рабочий пример:

nav
{
    position:fixed;
    width: 100px
    height: 200px;
    top: 0;
    left: 0;
    background-color: white;
}

nav ul
{
    position: absolute;
    height: 200px;
    top: 50%;
    
}

.content
{
    margin: 30px 220px;
    background-color:red;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar fixed</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametsdiam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </body>
</html>