Question

我目前正在使用bootstrap构建侧边栏。我已经建立了条形图，但是当我向下滚动页面时，侧边栏和导航栏之间会出现一个空白区域。无论如何我可以让导航栏保持静止，或者在页面向下滚动时填入空白区域？我已经包含了截图和代码。 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

我认为您的问题是使用position:fixed css类中的#sidebar-wrapper，这会导致它粘贴到屏幕上的定位位置而不会产生滚动效果。如果您希望它粘在顶部导航栏的正下方，则将其更改为position:absolute，您的问题将有希望得到解决。如果您希望它贴在顶部并且还要保持侧边栏的黑色背景，请更改#sidebar-wrapper position:relative。

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

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

希望这有帮助。

Answer 2

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

.sidebar-wrapper{
top:0;
}

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

2 个答案: