如何使用:last-child伪类将内容对齐到Navbar导航栏底部

解决方案 #

你遇到的margin-top: auto失效问题是因为导航容器和列表没有设置flex布局，无法分配垂直方向的剩余空间，这个修改不会影响你外层的grid布局，直接按如下步骤调整CSS即可：

1. 修改nav容器样式 #

给nav添加垂直flex布局属性：

nav {
  grid-area: nav;
  padding: .75rem;
  overflow: auto;
  grid-row-end: 5;
  /* 新增以下2行 */
  display: flex;
  flex-direction: column;
}

2. 修改ul列表样式 #

让ul撑满nav的全部可用高度，内部li垂直排列：

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 新增以下3行 */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

3. 给最后一个列表项添加上自动边距 #

新增单独的样式规则，把最后一个切换按钮推到导航栏底部：

nav li:last-child {
  margin-top: auto;
}

原理解释 #

常规文档流中margin: auto只能在水平方向自动分配剩余空间，只有flex容器内的子元素才能通过auto边距分配垂直方向的剩余空间：

• 外层nav设为flex垂直布局后，内部的ul可以通过flex-grow: 1占满nav剩下的所有高度
• 最后一个li设置margin-top: auto后，会自动占据所有上方的剩余空间，自然贴合到ul的底部，也就是nav的底部，不会定位到整个页面的底部
  如果不需要最后一个li底部保留默认的.75rem外边距，可以在上面的nav li:last-child规则里额外添加margin-bottom: 0即可。

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