修复了窗口调整大小时带有侧边栏位置的导航栏

Question

我目前正在开发一个带有导航栏和侧边栏的网页。我的导航栏包含我的页面的类别，即汽车和摩托车。单击后，侧边栏将显示其中包含所选类别的库和参考。但是，每当窗口调整大小时，我的页面都会丢失其格式。侧边栏是固定的，但它可以滚动，看起来它与导航栏断开连接。如何使他们的位置固定？.navbar-inverse {  background: black;  font-size: 18px;}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus {  color: #ffb143;}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus {  color: white;  font-size: 18px;}.navbar-brand {  font-family: 'Lato', sans-serif;  color: grey;  font-size: 20px !important;  margin: 0px;}td {  font-weight: normal;  padding-left: 55px;  padding-right: 10px;  padding-bottom: 18px;  text-align: center;}th {  font-weight: bold;  padding-left: 65px;  padding-right: 50px;  overflow: hidden;  white-space: nowrap;  text-align: center;}table#bod {  width: 100%;  margin-left: 15px;  margin-right: 45%;}#add {  margin-left: 10px;  width: 50px;}.sidebar {  height: 100%;  width: 200px;  position: fixed;  z-index: 1;  top: 0;  left: 0;  background-color: black;  overflow-x: hidden;  padding-top: 80px;  margin-top: 45px;}/* Style sidebar links */.sidebar a {  padding: 6px 8px 6px 16px;  text-decoration: none;  font-size: 18px;  color: white;  display: block;}/* Style links on mouse-over */.sidebar a:hover {  color: #f1f1f1;}/* Style the main content */.main {  margin-left: 160px;  /* Same as the width of the sidenav */  padding: 0px 10px;}/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */@media screen and (max-height: 450px) {  .sidebar {    padding-top: 15px;  }  .sidebar a {    font-size: 18px;  }}

Answer 1

如果我理解你的问题......那么我只是减少了侧边栏的 Z-index 并将所有元素的框大小设置为边框框，并将正文的边距和填充设置为 0

/* added this */

*{

padding : 0;

margin : 0;

box-sizing : border-box;

}

.navbar-inverse {

  background: black;

  font-size: 18px;

}

.navbar-inverse .navbar-nav>li>a:hover,

.navbar-inverse .navbar-nav>li>a:focus {

  color: #ffb143;

}

.navbar-inverse .navbar-brand:hover,

.navbar-inverse .navbar-brand:focus {

  color: white;

  font-size: 18px;

}

.navbar-brand {

  font-family: 'Lato', sans-serif;

  color: grey;

  font-size: 20px !important;

  margin: 0px;

}

td {

  font-weight: normal;

  padding-left: 55px;

  padding-right: 10px;

  padding-bottom: 18px;

  text-align: center;

}

th {

  font-weight: bold;

  padding-left: 65px;

  padding-right: 50px;

  overflow: hidden;

  white-space: nowrap;

  text-align: center;

}

table#bod {

  width: 100%;

  margin-left: 15px;

  margin-right: 45%;

}

#add {

  margin-left: 10px;

  width: 50px;

}

.sidebar {

  height: 100%;

  width: 200px;

  position: fixed;

  z-index: -1;

  top: 0;

  left: 0;

  background-color: black;

  overflow-x: hidden;

  padding-top: 80px;

  margin-top: 45px;

}

/* Style sidebar links */

.sidebar a {

  padding: 6px 8px 6px 16px;

  text-decoration: none;

  font-size: 18px;

  color: white;

  display: block;

}

/* Style links on mouse-over */

.sidebar a:hover {

  color: #f1f1f1;

}

/* Style the main content */

.main {

  margin-left: 160px;

  /* Same as the width of the sidenav */

  padding: 0px 10px;

}

/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */

@media screen and (max-height: 450px) {

  .sidebar {

    padding-top: 15px;

  }

  .sidebar a {

    font-size: 18px;

  }

}

<nav class="navbar navbar-inverse" nav id="nav_bar">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="index.php"> MRB Data Library </a>

    </div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#" style=>Cars</a></li>

      <li class="active"><a href="#">||</a></li>

      <li class="active"><a href="#">Motorcycle</a></li>

    </ul>

  </div>

</nav>

<form action="slider_update.php" method="POST">

  <div class="sidebar">

    <center>

      <h2 style="color: white">LIBRARY</h2>

    </center>

    <a href="index.php"><i class="fa fa-fw fa-home"></i> Home</a>

    <a href="#.php"><i class="fa fa-fw fa-folder"></i> Reference</a>

    </nav>

  </div>