如何将div固定在父容器右下角？fixed定位方案不符合需求

你当前的问题出在position: fixed——这个定位是相对于浏览器视口的，所以你的绿色区域div会脱离父级的col-4容器，直接贴在视口右下角，自然超出父容器范围。

修正方法如下：

1. 给绿色区域的直接父容器（col-4内部的<div class="row">）添加position: relative，让内部绝对定位元素以这个父容器为基准定位。
2. 将绿色区域的position: fixed改为position: absolute，保留bottom: 0; right: 0;，再补充width: 100%;确保它填满父容器宽度，不超出范围。
3. 如果上方购物车区域需要滚动，给购物车卡片设置max-height和overflow-y: auto，避免内容溢出后遮挡底部绿色区域。

修改后的完整代码：

<div class="row">
     <div class="col-8">
          <p> Big area </p> 
     </div>
     
     <div class="col-4">
          <!-- 给父级row添加相对定位 -->
          <div class="row" style="position: relative; min-height: 100vh;">
               <!-- 购物车区域设置滚动 -->
               <div class="card col-12" style="max-height: calc(100vh - 80px); overflow-y: auto;">
                    <div class="card-body">
                         <p>Cart Area</p>
                         <!-- 可添加更多测试内容验证滚动效果 -->
                         <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
                    </div>
               </div>
               <!-- 绿色区域改为绝对定位，相对于父row定位 -->
               <div class="card col-12" style="position: absolute; bottom: 0; right: 0; width: 100%;">
                    <div class="card-body">
                         <p>Green Area</p>
                    </div>
               </div>
          </div>
     </div>
</div>

关键说明： #

• position: relative：父容器设置后，内部absolute元素的定位参考会从视口切换为该父容器。
• min-height: 100vh：确保父容器至少占满视口高度，让底部绿色区域能固定在右侧栏的底部位置。
• max-height: calc(100vh - 80px)：通过计算设置购物车区域的最大高度，减去绿色区域的大致高度，配合overflow-y: auto实现内容滚动，避免覆盖底部区域。

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