我如何始终将我的html元素固定在父元素的底部，我正在使用overflow：hidden并隐式给父元素一个高度？

问题描述

我正在使用React开发一个Keeper应用，在该应用中，用户添加了笔记，这些笔记会显示在屏幕上。现在的事情是我希望注释具有隐式高度：150px，并使用overflow：auto，以便用户可以滚动查看其注释内容。然后，我在注释的右下角添加了删除按钮请注意，我希望即使用户滚动注释，此删除按钮也始终保持在右下角。您可以看到下面的图片：
https://www.flickr.com/photos/189671520@N03/50250935391/in/dateposted/
注意2：当用户尚未滚动注释时，该按钮会提示您贴紧按钮并正常工作。
注意3：当用户滚动滚动到问题开始的地方时，删除按钮也随文本一起向上移动，我希望无论用户滚动如何，该删除按钮都应始终粘贴在右下角。
注释的HTML是：

<div className="note">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <button onClick={deleteNoteInNote}>
        {" "}
        <DeleteIcon />{" "}
      </button>
    </div>

笔记的CSS是

.note {
  background: #fff;
  border-radius: 7px;
  Box-shadow: 0 2px 5px #ccc;
  padding: 10px;
  width: 240px;
  height: 140px;
  margin: 16px;
  float: left;
  overflow: auto;
  position: relative;
}
.note h1 {
  font-size: 1.1em;
  margin-bottom: 6px;
}
.note p {
  font-size: 1.1em;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.note button {
  color: #f5ba13;
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  outline: none;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

关于桌面视口的问题仅引起width：726px以下的原因，我已经删除了height：150px并将其替换为height：max-content。
我只想使用Bootstrap CDN
请尽可能不要建议使用ReactBootstrap npm软件包的答案
谢谢您的帮助，提前：D

解决方法

将注释div换成另一个div。给新的div（父级）一个相对位置。给子div中的按钮一个绝对位置。

这应该可以解决您的问题。

我做了一个JSFiddle来说明这一点：http://jsfiddle.net/koder613/18dt3yhL/8/

HTML（JSX）：

<div className="noteParent">
  <div className="note">
        <h1>{props.title}</h1>
        <p>{props.content}</p>
        <button onClick={deleteNoteInNote}>
          {" "}
          <DeleteIcon />{" "}
        </button>
  </div>
</div>

CSS：

.noteParent {
    width:200px;
    height: 150px;
    position:relative;
}
.note {
    height:100%;
    overflow: auto;
    
}
.note button{
   position:absolute;
    bottom:0;
    right:1rem;
}