如何将React Todo应用中的TodoForm组件对齐到屏幕底部

推荐方案：Flex弹性布局（无遮挡、适配性强） #

直接修改App.css文件即可，无需改动其他组件代码：

1. 新增.App容器样式，让根容器占满整个视口并使用纵向弹性布局
2. 调整.todos列表的高度属性为自动填充剩余空间
   修改后的App.css相关代码如下：

/* 新增的.App样式 */
.App {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 调整后的.todos样式，删除原有height:400px，替换为flex:1 */
.todos {
  flex: 1;
  overflow: auto;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  background-color: yellowgreen;
}

修改后todo列表会自动填充标题和表单之间的所有剩余空间，TodoForm始终停靠在屏幕底部，列表滚动不会影响表单位置，也不会出现内容被遮挡的问题。

可选方案：fixed固定定位（无需改动原有布局结构） #

如果不想调整原有弹性布局，可以直接给TodoForm加固定定位：

1. 修改TodoForm.css，给表单添加固定定位属性：

.todoform {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: skyblue;
}

2. 调整App.css中.todos的内边距，避免列表底部内容被表单遮挡：

.todos {
  height: 400px;
  overflow: auto;
  margin: 5px;
  padding: 5px 5px 70px 5px;
  border-radius: 5px;
  background-color: yellowgreen;
}

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