html - 修复了侧边栏滚动无法正常工作
问题描述
我在引导程序中的导航栏之后制作了一个固定的侧边栏。当我使用 top:0 时出现问题,当我在侧边栏中添加新块时它工作正常,但是当我从.sidenav类中删除 top:0 时,当我在屏幕到达后添加至少两个块时,滚动开始工作它的 100% 高度。此外,即使在滚动之后,它们之后的最后一个块也不会在屏幕上保持可见。使用 top:0 一切正常,但是当我使用它时导航栏与它重叠。 当我使用顶部:0:
当我不使用 top:0 时:
但是,如果我删除 top:0 并在屏幕后保留半块,则不会为此滚动。 滚动查看未显示的最后一个块可见性:
这是代码:HTML:
<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>
CSS:
.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;
}
解决方案
推荐阅读
- node.js - 如何使用 graphql 屏幕将标题发送到 graphql?
- python - sharex 和 sharey 没有为子图创建共享轴标签
- azure - Azure Configurationmanager GetConfigurationAsync 代理错误
- laravel - 创建类别时如何在 Laravel 中修复此错误
- node.js - Flutter-node.js 对的最佳聊天框架?
- node.js - 在单个 Alexa 技能中使用多个声音?
- javascript - 如果可能,关闭所有打开的下拉菜单并合并代码
- node.js - 在多个服务器之间拆分 API 的负载
- html - 在 html (angular 6) 中附加一个带有对象属性的翻译字符串
- java - 代码审查:解决这个 java 程序的最佳方法是什么?