滚动时如何使子div固定于父div右下角

你的核心问题是将父容器的overflow-y:scroll直接应用在了包含固定元素的容器上，导致所有内容（包括绝对定位的子元素）都会随滚动条移动。要实现底部元素固定在父容器右下角且不随内容滚动，需要将滚动区域和固定区域分离处理，具体方案如下：

修改步骤 #

1. 调整父容器样式：移除父容器.usage_body的overflow-y:scroll，保留position:relative作为固定元素的定位基准。
2. 单独设置文本容器的滚动：给文本容器.chart-wrapper添加height: calc(100% - 30px)（减去底部固定元素的高度）和overflow-y:scroll，让文本内容仅在这个容器内滚动。
3. 修正固定元素的位置与尺寸：调整.chart-wrapper__graphLabel的bottom和right值适配父容器的padding，用calc(100% - 20px)设置宽度，避免元素超出父容器范围。

修改后的完整代码 #

CSS

.text {
  color: white;
  font-size: 15px;
  text-align: right;
  margin: 0; /* 清除默认margin，避免高度溢出 */
}

.usage_body {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  padding: 10px;
  position: relative;
  /* 移除全局滚动，让滚动仅作用于文本容器 */
}

.chart-wrapper {
  height: calc(100% - 30px); /* 预留底部固定元素的高度 */
  overflow-y: scroll;
}

.chart-wrapper__graphLabel {
  position: absolute;
  bottom: 10px; /* 匹配父容器的padding-bottom */
  right: 10px; /* 匹配父容器的padding-right */
  width: calc(100% - 20px); /* 左右各减去10px padding */
  height: 30px;
  background-color: #00f;
}

HTML（结构无需改动）

<div class="usage_body">
  <div class="chart-wrapper">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
    laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
    architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
    dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
    aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
    molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
    Est?
  </div>
  <div class="chart-wrapper__graphLabel">
    <p class="text">
      position me
    </p>
  </div>
</div>

原理说明 #

• 父容器仅作为定位容器，不再承担滚动功能，确保绝对定位的底部元素始终相对于父容器的右下角固定。
• 滚动功能转移到文本容器上，文本滚动时不会影响底部固定元素的位置。
• 使用calc()动态计算尺寸，适配父容器的padding，保证元素位置精准且不超出容器边界。

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