Как предотвратить пустое пространство при прокрутке с помощью боковой панели?

В настоящее время я создаю боковую панель с помощью бутстрапа. У меня есть встроенная панель, однако, когда я прокручиваю страницу вниз, между боковой панелью и панелью навигации появляется пустое пространство. Могу ли я сделать так, чтобы панель навигации оставалась неподвижной или заполняла пустое пространство при прокрутке страницы вниз? Я включил скриншоты и код. Обычный, перед прокруткой

После прокрутки

Код указан ниже:

<nav class = "navbar navbar-inverse">
    <div class = "container-fluid">
        <div class = "navbar-header">
            <button type = "button" class="navbar-toggle" data-
toggle="collapse" data-target="#myNavbar">
                <span class= "icon-bar"></span>
                <span class= "icon-bar"></span>
                <span class= "icon-bar"></span>
            </button>
            <a class = "navbar-brand" href="Home.html">Stephens Catering</a>
        </div>

        <div class = "collapse navbar-collapse" id="myNavbar">
            <ul class = "nav navbar-nav">
                <li><a href="Home.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li class="dropdown">
    <a class = "dropdown-toggle" data-toggle="dropdown" 
    href="OurProducts.html">Our Products
                    <span class = "caret"></span></a>
                    <ul class = "dropdown-menu">
                        <li><a href="Cookers.html">Cookers</a></li>
                        <li><a href="Fridges.html">Fridges</a></li>
                        <li><a href="Misc.html">Misc</a></li>
                    </ul>
                </li>
                <li><a href="ContactUs.html">Contact us</a></li>
            </ul>

            <ul class = "nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
            </ul>

        </div>
    </div>
</nav>

<!--The sidebar for the products pages -->
<div id = "wrapper">
    <!-- Sidebar -->
    <div id = "sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class = "sidebar-brand">
                <a href="#">Categories</a>
            </li>
            <li>
                <a href="Cookers.html">Cookers</a>
            </li>
            <li>
                <a href="Fridges.html">Fridges</a>
            </li>
            <li>
                <a href="Misc.html">Misc</a>
            </li>
        </ul>
    </div>
    <!-- Sidebar Wrapper -->

<!-- Page Content -->
<!-- Button to toggle sidebar menu -->
<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class = "row">
            <div class = "col-lg-12">
                <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
            </div>
        </div>
    </div>
</div>

Таблица стилей:

body {
overflow-x: hidden;

}

/* Toggle Styles */

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
}

#wrapper.toggled {
padding-left:250px;
}

#sidebar-wrapper {
z-index: 1000;
position:fixed;
left:250px;
width:0;
height:100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
width:250px;
}

#page-content-wrapper {
width:100%;
position:absolute;
padding:15px;
}

#wrapper.toggled #page-content-wrapper {
position:absolute;
margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
position:absolute;
top:0;
width:250%;
margin:0;
padding:0;
list-style: none;
}

.sidebar-nav li {
text-indent:20px;
line-height: 40px
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color:#999999;
}

.sidebar-nav li a:hover {
text-decoration: none;
color:#fff;
background:rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li focus {
text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
height:65px;
font-size:18px;
line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
color:#999999;
}

.sidebar-nav > sidebar-brand a:hover{
color:#fff;
backround:none;
}

@media(min-width: 768px) {
#wrapper {
    padding-left:0;
}

#wrapper.toggled {
    padding-left:250px;
}

#sidebar-wrapper {
    width:0;
}

#wrapper.toggled #sidebar-wrapper {
    width:250px;
}

#page-content-wrapper {
    padding:20px;
    position: relative;
}

#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right:0;
 }
}