使用侧边栏滚动时如何防止空白？

Question

我目前正在使用引导程序构建侧边栏。 我已经建立了栏，但是当我向下滚动页面时，边栏和导航栏之间会出现一个空白区域。无论如何，我可以让导航栏保持静止，或者在向下滚动页面时填充空白区域？我已经包含了屏幕截图和代码。 Normal, before scrolling

After Scrolling

代码如下：

<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;
 }
}

Answer 1

尝试将此添加到您实际的侧边栏包装 css 规则中：

.sidebar-wrapper{
top:0;
}

Answer 2

我认为您的问题是在#sidebar-wrapper css 类中使用position:fixed，这会导致它粘在屏幕上的定位位置而不会影响滚动。如果您希望它贴在顶部导航栏的正下方，请将其更改为position:absolute，您的问题将有望得到解决。如果你想让它保持在顶部，同时保持侧边栏的黑色背景一直到底部，那么更改 #sidebar-wrapper position:relative。

了解这一点的最佳方法是了解 position 属性值的影响。以下是 w3schools 定义位置属性及其值的链接。

https://www.w3schools.com/cssref/pr_class_position.asp

希望这会有所帮助。