能否用CSS将嵌套<div>固定在父级<div>底部？

方法一：Flexbox布局（推荐方案） #

通过Flex的自动外边距特性，可轻松实现需求，兼容性良好：

<div id="div1" style="display: flex; flex-direction: column; min-height: 100vh;">
  something...
  <div id="div2" style="margin-top: auto;">
    <!-- div2的内容 -->
  </div>
</div>

• 原理：display: flex + flex-direction: column让div1内元素垂直排列，margin-top: auto会让div2自动推到容器剩余空间的底部。如果div1不需要占满视口，替换min-height为你需要的容器高度即可。

方法二：绝对定位方案 #

适合需要精确控制位置的场景：

<div id="div1" style="position: relative; min-height: 100vh;">
  something...
  <div id="div2" style="position: absolute; bottom: 0; left: 0; width: 100%;">
    <!-- div2的内容 -->
  </div>
</div>

• 原理：div1设置position: relative作为定位上下文，div2用position: absolute固定在底部。注意：如果div1内内容高度超过容器，div2会覆盖内容，需要给div1的内容区域添加padding-bottom（值等于div2的高度）来避免重叠。

方法三：Grid布局方案 #

现代浏览器支持的简洁写法：

<div id="div1" style="display: grid; grid-template-rows: 1fr auto; min-height: 100vh;">
  <div>something...</div>
  <div id="div2">
    <!-- div2的内容 -->
  </div>
</div>

• 原理：grid-template-rows: 1fr auto让第一行内容占据所有可用空间，第二行（div2）仅占自身所需高度，自然固定在容器底部。

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