如何让可折叠div的底部箭头在收起时显示于最后一行下方？

要实现收起时箭头显示在最后一行稍下方、展开时在容器底部的效果，你可以通过以下调整实现：

• 移除容器的固定height，改用max-height控制展开/收起状态，让容器高度自适应内容
• 调整箭头容器的样式，确保它和内容间有足够间距，同时避免覆盖内容

修改后的完整代码如下：

<template>
  <div class="bruh-introduce-koti" :class="{ isBigPara: openParagraph }">
    <div class="bruh-koti-header">
      <div class="">Introducing</div>
    </div>
    <div class="bruh-info-block">
      <div class="bruh-paragraphs">
        <p>
          {{ firstParagraph }}
        </p>
        <p>
          {{ secondParagraph }}
        </p>
      </div>
    </div>
    <div class="bruh-arrow-container">
      <i
        class="fa-solid fa-arrow-down"
        :class="{ rotated: openParagraph }"
        @click="openParagraph = !openParagraph"
      ></i>
    </div>
  </div>
</template>
  
<script>
export default {
  components: {},
  data() {
    return {
      firstParagraph:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
      secondParagraph:
        "Watch this video to know more about why and how you can leverage. kotis and expand your generosity circle.",
      picture: "https://picsum.photos/500",
      openParagraph: false,
    };
  },
  methods: {},
};
</script>
<style scoped>
.bruh-koti-wrapper {
  padding: 20px;
}
.bruh-introduce-koti {
  border-radius: 5px;
  border: 1px solid #e6eaea;
  background: rgba(245, 247, 246, 0.59);
  padding: 16px 20px;
  margin: 25px 16px;
  max-height: 150px; /* 收起时的最大高度 */
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease; /* 过渡动画提升流畅度 */
}
.bruh-info-block {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 20px;
}
.bruh-koti-header {
  display: flex;
  justify-content: space-between;
}
.isBigPara {
  max-height: 1000px; /* 展开时设置足够大的高度，也可直接用auto */
}
.bruh-arrow-container {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 8px 0;
  background: rgba(245, 247, 246, 0.9); /* 背景避免和内容重叠 */
  margin-top: 8px; /* 和内容拉开间距 */
}
.bruh-paragraphs {
  padding-bottom: 0; /* 移除冗余padding，改用箭头容器的margin控制间距 */
}
/* 可选：展开时箭头旋转，增强交互反馈 */
.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
</style>

关键修改说明： #

1. 容器高度控制：将原固定height:150px改为max-height:150px，展开时通过isBigPara类把max-height设为足够大的值，让容器自适应内容高度，同时添加过渡动画让展开/收起更平滑。
2. 箭头容器优化：
   • 添加margin-top:8px，确保箭头和内容间有间距，收起时自然落在最后一行下方
   • 增加半透明背景，避免箭头和被截断的内容重叠
   • 可选添加箭头旋转效果，提升交互体验
3. 冗余样式清理：移除.bruh-paragraphs的padding-bottom，避免间距冗余

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