我如何始终保持我的 html 元素粘在父元素的底部，我正在使用溢出：隐藏并隐式地为父元素提供高度？

Posted 2023-03-05

【中文标题】我如何始终保持我的 html 元素粘在父元素的底部，我正在使用溢出：隐藏并隐式地为父元素提供高度？

【英文标题】：how do I always keep my html element stick to bottom of parent element,I am using overflow:hidden and giving height implicitly to parent element?

【发布时间】：2020-12-10 17:16:20

【问题描述】：

我正在使用 React 制作一个 Keeper 应用程序，在这个应用程序中，用户添加了显示在屏幕上的注释。现在的事情是我希望笔记具有隐式高度：150px 并使用溢出：自动，以便用户可以通过滚动查看他的笔记内容。然后我在右下角添加了一个删除按钮请注意，即使用户滚动注释，我希望此删除按钮始终保持在右下角。您可以在下面看到图片：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;

问题是关于桌面视口仅导致宽度低于：726px 我已删除高度：150px 并将其替换为 height:max-content。我只想使用 Bootstrap CDN如果可能，请不要建议使用 ReactBootstrap npm 包的答案 提前感谢您的帮助：D

【问题讨论】：

请制作一个codeandbox sn-p。

***.com/a/63521776/13930763 credits= E C（他做了所有繁重的工作）

太棒了。给他点赞并接受他的回答。

我做到了，但我做得不好 :( 由于“感谢您的反馈！声望低于 15 的人的投票会被记录，但不要更改公开显示的帖子得分。”

非常感谢

【参考方案1】：

将笔记 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;

【讨论】：

谢谢你，EC，你的巧妙技巧帮助我摆脱了困境

乐于助人:-)