Question

我在引导程序中的导航栏后做了一个固定的侧边栏。当我使用top：0时，有一个问题，当我在侧边栏中添加新块时，它可以正常工作，但是当我从 .sidenav 类中删除top：0时，当我添加屏幕达到其100％高度后至少两个方块。此外，即使滚动后，它们之后的最后一个块也不会在屏幕上保持可见。使用top：0时一切正常，但是当我使用它时，导航栏会重叠它。 当我使用top：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;
  }

Answer 1

我的声誉不允许我发表评论，因为这肯定是评论。

您是否尝试过将'auto'用于CSS中的溢出？

.sideNav {
overflow: auto;
}

修复了侧边栏滚动无法正常工作的问题

1 个答案: