html - 动态内容下方的 float 按钮

Question

根据从服务器获取的数据，我有一个行数可变的表 如果表格包含多于 X 行，它将变为可滚动 我想添加“ float ”按钮

• 如果行太少而无法滚动，则充当假的最后一行
• 如果表格可滚动则覆盖最后一行

我在 React 中这样做并且我能够获得表格最后一行的坐标 例如 让 nodeBoundaries = document.getElementById('id').getBoundingClientRect()

但是我无法用css定位它

我试过的是这样的:

let rect = document.getElementById('lastRow').getBoundingClientRect()
    <div style={
      {'position' : 'fixed', 
      'left' : rect.left + 'px',
      'top' : rect.top+'px', 
      'height' : '20px', 
      'width':'50px', 
      'backgroundColor' :"red"}}>BUTTON </div>
      }

Answer 1

正如 Tom 所说，您可以尝试这样做，如果表格高度大于 X，则可以将按钮样式更改为符合您需要的另一个属性。

我还想向您指出 FLEXBOX . IMO，一种更简洁的实现方式。