Html 固定侧边栏滚动不正常工作
我在引导中的导航栏之后制作了一个固定的边栏。当我使用top:0时它有一个问题，当我在侧边栏中添加新块时它工作正常，但当我从.sidenav类中删除top:0时，当我在屏幕达到100%高度后添加至少两个块时，滚动开始工作。此外，即使在滚动之后，它们后面的最后一个块也不会在屏幕上保持可见。使用top:0时，一切都很好，但在我使用它时，导航栏与它重叠。 当我使用top:0: 当我不使用top:0: 然而，若我删除了top:0，屏幕后仍保留半个块，那个么它就不会对此进行滚动。 滚动查看未显示的最后一个块可见性： 代码如下： HTML:Html 固定侧边栏滚动不正常工作,html,css,twitter-bootstrap-3,sidebar,Html,Css,Twitter Bootstrap 3,Sidebar,我在引导中的导航栏之后制作了一个固定的边栏。当我使用top:0时它有一个问题，当我在侧边栏中添加新块时它工作正常，但当我从.sidenav类中删除top:0时，当我在屏幕达到100%高度后添加至少两个块时，滚动开始工作。此外，即使在滚动之后，它们后面的最后一个块也不会在屏幕上保持可见。使用top:0时，一切都很好，但在我使用它时，导航栏与它重叠。 当我使用top:0: 当我不使用top:0: 然而，若我删除了top:0，屏幕后仍保留半个块，那个么它就不会对此进行滚动。 滚动查看未显示的最后一
<html>
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div class="cotainer-fluid navbar-fixed-top">
<div class="row panel-head">
<div class="col-sm-4">
<span>For Business Queries: </span>
<a href="tel:+923214868587"><span class="glyphicon glyphicon-earphone phone-icon"></span>+923214868587</a>
</div>
<div class="col-sm-4">
<span>Email :</span>
<a href="#"> ourwebsite@gmail.com</a>
</div>
<div class="col-sm-4">
<span>Join Us: </span>
<a title="Facebook" href=""><img src="./assets/images/if_facebook_circle_color_107175.png" alt="fb" height="25" width="25"></a>
<a title="Twitter" href=""><img src="./assets/images/if_twitter_circle_color_107170.png" alt="twitter" height="25" width="25"></a>
<a title="Instagram" href=""><img src="./assets/images/if_instagram_circle_color_107172.png" alt="instagram" height="25" width="25"></a>
<a title="Google+" href=""><img src="./assets/images/if_google_circle_color_107180.png" alt="google+" height="25" width="25"></a>
</div>
</div>
<nav class="navbar navbar-default" id="nav_bar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="home.html" class="logo">FoodieHighway</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="Home" class="active2">
<a href="home.html" style="color:#332f2f">HOME</a>
</li>
<li>
<a href="index.html">LOGOUT</a>
</li>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container-fluid after-navbar-body">
<div class="row">
<div class="col-lg-2">
<div class="sidenav">
<div class="row">
<div class="col-sm-12 order-detail-1">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan2222</p>
<p>ETA : 5 Mins</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
left: 0;
border:1px solid black;
overflow-y:scroll;
overflow-x:hidden;
}
.after-navbar-body
{
padding-top: 110px;
}
@media (max-width:767px)
{
.after-navbar-body
{
padding-top: 151px;
}
}
.sidenav .row:nth-child(1) div
{
background-color: rgb(236,212,212);
}
.sidenav .row:nth-child(2) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(3) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(4) div
{
background-color: rgb(230, 238, 231);
}
.sidenav .row:nth-child(5) div
{
background-color: rgb(219, 240, 222);
}
.sidenav .row
{
border-bottom:1px solid black;
}
.sidenav p
{
color:black;
font-weight:700;
}
.order-p
{
padding-top:20px;
}