我正在使用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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句