Css 将元素放置在div溢出的底部

我试图在

div

的底部（5px）放置一个元素，它位于另一个div的内部，溢出设置为auto。因此，当它大于父div时，会出现滚动条

我还需要在内部div的底部放置一个按钮，使其保持在底部，因此我将

position:relative

设置为div，将

position:absolute

设置为按钮

当div不大于外部div时，它可以正常工作，但当它有溢出时，按钮不会停留在它的底部，而是在距离外部div底部5px的位置，当我滚动溢出div时，它会随之滚动。在这里更容易看到：

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

编辑


短文

编辑
梅因迪夫先生{
边框：1px纯绿色；
宽度：200px；
高度：200px；
}
.innerDiv{
边框：1px纯红；
背景：轻珊瑚；
最大高度：200px；
身高：100%；
溢出：自动；
位置：相对位置；
}
.btn{
位置：绝对位置；
底部：5px；
}
}

我如何解决这个问题，使按钮在溢出时始终距内分区底部5 px，同时在文本较短时距外分区底部5 px？
此外，我正在寻找一种解决方案，它不会显式地将按钮上方div部分的高度设置为70%左右，因为我的按钮可能具有可变高度（从20px到200px）。

---

非常感谢。

给出与.btn相关的位置，并将按钮置于“父项”位置

          <style type="text/css">
.mainDiv {
    border: 1px solid green;
    width: 200px;
    height: 200px;
}
.innerDiv {
    border: 1px solid red;
    background: lightcoral;
    max-height: 200px;
    height:100%;
    overflow: auto;
    position:relative;
}
.btn {
    position:relative;
    bottom: 30px;
}</style>
<div class="mainDiv">
    <div class="innerDiv">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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.</p>

    </div>
     <button class="btn">Edit</button>
</div>
<br>
<div class="mainDiv">
    <div class="innerDiv">
        <p>Short text.</p>
        <button class="btn">Edit</button>
    </div>
</div>

梅因迪夫先生{
边框：1px纯绿色；
宽度：200px；
高度：200px；
}
.innerDiv{
边框：1px纯红；
背景：轻珊瑚；
最大高度：200px；
身高：100%；
溢出：自动；
位置：相对位置；
}
.btn{
位置：相对位置；
底部：30px；
}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

编辑


短文

编辑

不确定，如果这正是您要寻找的，但如果您根本不定位按钮，它将停留在内部div的底部。

将最小高度添加到内部div将解决您的问题

这是一张工作票

---

编辑：最新的

为段落元素指定最小高度

<p style="min-height: 70%;">Your Text...</p>    

这将有助于按照您的要求固定您的按钮位置

另一种解决方案

在

中添加按钮，如下所示：

    <div class="btndiv">
        <button>Edit</button>
    </div>   

---

一些代码可以帮助其他人理解您的问题。我已经添加了代码，我希望它是内部div的一部分，因此它可以滚动并位于其底部。同时，如果文本没有像第二个div中的短文本那样溢出，我希望它位于主div的底部。这是您的解决方案。btn{display:block；margin:-100px 0；position:fixed；z-index:999；}是的，但是如果文本很短，我希望它在底部，当文本没有滚动到底部时，它仍然不在底部：你希望按钮在最底部吗？或者你说的是文本重叠按钮？在这两种情况下，我都希望它位于最底部：当文本不够高时，以及当它重叠时，这正是我想要的，但有没有办法避免恒定高度？因为如果我的按钮具有可变高度，你可以给出%值，而不是px，比如最小高度：70%；很好，很有效！谢谢在我看来，这似乎不是一个简单的解决方案：）虽然这不是抽象的，但如果我有一个按钮的高度比其他按钮高出30%呢？如果它们是从20px到150px的可变高度呢？实际上它不起作用，因为如果我之前有一个我实际上是这样做的呢

<p style="min-height: 70%;">Your Text...</p>    

.btn {
    position:relative;
    bottom: 5px;
}

    <div class="btndiv">
        <button>Edit</button>
    </div>   

.btndiv{
    position:relative;
    bottom: 5px;
}