如何将导航栏中的logout div置于导航栏底部？

方法一：不修改HTML结构，仅调整CSS #

你的.logout_nav嵌套在<nav>标签内，只需将<nav>设置为flex布局容器，利用margin-top: auto就能把logout区域推到底部：

1. 给<nav>添加flex布局样式：

.nav nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 让导航菜单区域占满父容器剩余空间 */
}

2. 修改.logout_nav的样式，补全flex属性并添加自动顶边距：

.nav .logout_nav {
  background-color: black;
  display: flex; /* 启用flex布局，让justify-center生效 */
  justify-content: center;
  padding: 20px 0;
  color: white;
  margin-top: auto; /* 自动顶开上方元素，固定到底部 */
}

方法二：调整HTML结构，优化布局逻辑 #

把.logout_nav从<nav>中移出，作为.nav的直接子元素，利用flex的justify-content: space-between实现上下分布：

1. 修改后的HTML结构：

<div class="container">
  <div class="nav">
    <div class="logo-container">
      <img src="/IMAGES/FM_LOGO.png" alt="LOGO" >
    </div>
    <nav>
      <ul>
        <li><a href="#">Dashoard</a></li>
        <li><a href="#">Request/Report</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Item List</a></li>
        <li><a href="#">Claim Item</a></li>
        <li><a href="#">Admin Panel </a></li>
      </ul>
    </nav>
    <!-- 将logout_nav移到nav外部 -->
    <div class="logout_nav">
      <p>Lost and Found System</p>
    </div>
  </div>
  <div class="content">
    <h1>Dashboard</h1>
  </div>
</div>

2. 调整.nav的CSS，添加分布规则：

.nav {
  display: flex;
  flex-direction: column;
  background-color: blueviolet;
  width: 200px;
  min-height: 100vh;
  padding: 0 15px;
  justify-content: space-between; /* 让顶部logo、中间菜单、底部logout自动分布 */
}

3. 确保.logout_nav的flex属性完整：

.nav .logout_nav {
  background-color: black;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: white;
}

为什么你之前的absolute方法无效？ #

你给.nav设置了position: relative，但.logout_nav的直接父元素是<nav>，如果<nav>没设置position: relative，absolute定位会相对于.nav，此时还需要额外设置bottom: 0、left: 15px、right:15px来匹配.nav的内边距，这种方法不如flex布局灵活，还容易出现响应式适配问题。

内容的提问来源于stack exchange，提问作者ecaeP