我的位置粘性在我的代码中不起作用。我将其设置为左侧，但什么也没发生

Question

我目前正在学习 Bootstrap、HTML 和 CSS，但遇到了这个错误。我希望我的侧边栏具有粘性，但它似乎不起作用并粘在左侧。我尝试了位置粘性并设置 left:0 但仍然没有帮助。

body {
  background-color: #e6e5e4;
}


/* Sidebar */

.sidebar {
  background: #494949;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  height: 100%;
  position: sticky;
  left: 0;
  overflow-y: auto;
}


/* Custom scrollbar */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgb(254, 254, 254);
  border-radius: 10px;
}


/*  */

a {
  text-decoration: none;
}

#logout {
  align-items: end;
  bottom: 0;
}

.icon {
  color: #ffffff;
}


/* Dropdown */

.dropdown-toggle::after {
  display: none;
}


/* Animation */

li:hover {
  background-color: #302e2e;
  transition: all 0.5s ease;
}


/* Adminbox */

.adminbox {
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 10px 0 5px 0.5px #302e2e;
}

#avataradmin {
  object-fit: contain;
  max-width: 50px;
  border-radius: 50%;
}

<body class="d-flex">
  <!-- SIDEBAR -->
  <aside class="d-flex">
    <div class="sidebar p-3">
      <!-- Logo -->
      <a routerLink="/" class="d-flex justify-content-center pb-4">
        <img src="assets/admin/logo.png" style="height: 100px" />
      </a>
      <hr style="color: white" />
      <ul class="menu nav nav-pills flex-column mb-auto pt-3">
        <li class="nav-link mb-3" style="background-color: #302e2e">
          <a routerLink="/dashboard" routerLinkActive="active">
            <span class="icon"> <i class="fa-solid fa-house"></i></span>
            <span class="text-white pe-4 ps-3">Dashboard</span>
          </a>
        </li>
        <li class="nav-link mb-3">
          <a routerLink="/customers">
            <span class="icon"><i class="fa-solid fa-user"></i> </span>
            <span class="text-white pe-4 ps-3">Customers</span>
          </a>
        </li>
        <!-- Dropdown -->
        <li class="nav-link mb-3">
          <a routerLink="/products" class="dropdown-toggle" data-bg-toggle="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="icon"><i class="fa-solid fa-bag-shopping"></i> </span>
            <span class="text-white pe-4 ps-3">Products</span>
            <i class="fa-solid fa-circle-chevron-down" style="color: #ffffff"></i>
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-link mb-3">
          <a routerLink="/orders">
            <span class="icon"><i class="fa-solid fa-receipt"></i> </span>
            <span class="text-white pe-4 ps-3">Orders</span>
          </a>
        </li>
        <li class="nav-link mb-3">
          <a routerLink="/categories">
            <span class="icon"> <i class="fa-brands fa-elementor"></i></span>
            <span class="text-white pe-4 ps-3">Categories</span>
          </a>
        </li>
        <li class="nav-link" id="logout">
          <a routerLink="/categories">
            <span class="icon">
              <i class="fa-solid fa-right-from-bracket"></i
            ></span>
            <span class="text-white pe-4 ps-3">Logout</span>
          </a>
        </li>
      </ul>
    </div>
  </aside>
  <!-- CONTENT -->
  <!-- ADMINBOX -->
  <div class="container-fluid p-0">
    <div class="adminbox">
      <div class="d-flex flex-row">
        <div class="logo ms-5">
          <img id="avataradmin" src="assets/admin/avatar.jpg" />
        </div>
        <div class="col ps-3">
          <div class="fw-bold text-uppercase">Xin chào</div>
          <div class="fw-light">Chức vụ</div>
        </div>
      </div>
    </div>
    <!-- insert content -->
    <app-product-detail></app-product-detail>
  </div>
</body>

我尝试固定位置，但这对我的情况没有帮助。这是我的代码的结果：

Answer 1

 .sidebar {
    background: #494949;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    height: 100vh; /*Use vh for viewport heigh*/
    position: sticky;
    top: 0; /*Set top instead of left for sticky positioning*/
    overflow-y: auto;

我的位置粘性在我的代码中不起作用。我将其设置为左侧，但什么也没发生

问题描述投票：0回答：1

1个回答

最新问题

我的位置粘性在我的代码中不起作用。我将其设置为左侧，但什么也没发生

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1