为何margin-top:auto无法将Flexbox列表项推至容器底部？

AI 小北

2026-8-2

解决Flexbox侧边栏导航项无法靠底的问题

问题根源

你给nav和ul设置了height: 100%，但**ul不是Flex容器**——margin-top: auto只有在父级是垂直方向（flex-direction: column）的Flex容器时，才能让子元素自动推到容器底部。当前ul只是普通块级元素，所以这个属性完全不生效。

修复步骤

给ul添加Flex容器属性，让它变成垂直布局：

ul {
  background-color: blueviolet;
  height: 100%;
  display: flex;  /* 新增 */
  flex-direction: column;  /* 新增 */
}

优化nav的高度设置：因为左侧容器#left是column方向的Flex容器，给nav加flex-grow: 1代替硬写height: 100%，能更灵活地占满Logo下方的剩余空间：
```
nav {
  background-color: red;
  flex-grow: 1;  /* 替换原来的height:100% */
}
```

修改后的完整CSS代码

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /* border: 1px solid black; */
}

body {
  display: flex;
  height: 100vh;
}

#left {
  background-color: aqua;
  width: 5rem;
}

.column {
  display: flex;
  flex-direction: column;
}

.top-left,
.top-right {
  padding: 1rem;
  background-color: aliceblue;
}

nav {
  background-color: red;
  flex-grow: 1;
}

ul {
  background-color: blueviolet;
  height: 100%;
  display: flex;
  flex-direction: column;
}

nav ul li:last-child {
  margin-top: auto;
  border: 1px solid white;
}

#right {
  background-color: orange;
  flex-grow: 1;
}