如何在外部div的底部显示两个内部div

在外部div的底部显示两个内部div可以通过以下几种方式实现：

1. 使用CSS的flexbox布局：
   • 将外部div设置为flex容器：display: flex; flex-direction: column;
   • 将两个内部div设置为flex项目：flex: 1;
   • 这样两个内部div会自动填充外部div的剩余空间，并且在底部显示。
   • 示例代码：
   • 示例代码：

• 使用CSS的grid布局：
  • 将外部div设置为grid容器：display: grid; grid-template-rows: 1fr auto;
  • 第一个内部div设置为自动扩展的行：grid-row: 1 / span 1;
  • 第二个内部div设置为固定在底部的行：grid-row: 2 / span 1;
  • 这样第一个内部div会占据剩余空间，第二个内部div会固定在底部。
  • 示例代码：
  • 示例代码：
• 使用绝对定位：
  • 将外部div设置为相对定位：position: relative;
  • 第一个内部div设置为绝对定位，并占据整个外部div：position: absolute; top: 0; bottom: 0;
  • 第二个内部div设置为绝对定位，并固定在底部：position: absolute; bottom: 0;
  • 这样第一个内部div会占据整个外部div的空间，第二个内部div会固定在底部。
  • 示例代码：
  • 示例代码：

以上是三种常见的方法，可以根据具体需求选择适合的方式来实现在外部div的底部显示两个内部div。