如何增加 ScrollToBottom 以填充屏幕的高度？

Question

这是一个代码沙箱，它定义了一个Logs React 组件并且效果很好。

它使用 react-scroll-to-bottom 来显示带有 header 和一些日志的页面。 请注意，因为我们使用的是 flexbox，所以日志部分的大小可以完美地适应屏幕的高度。

现在我想将此Logs组件放在App组件中。 问题是现在日志部分太高了，除了滚动到底部的滚动条之外，还会出现另一个滚动条。 你可以 在这里看到这个。

我认为这是因为我们使用100vh作为Logs组件的高度。 问题是，如果我将其更改为100% ， ScrollToBottom 会中断并显示完整的日志内容，就好像它是一个普通的 div 一样。 看起来 ScrollToBottom 需要特定类型的高度，例如px 、 em或vh才能工作。 我不确定 go 从这里到哪里。

如何增加 ScrollToBottom 以填充屏幕的高度？

Answer 1

这个问题确实与使用 100vh 有关。 您没有考虑 header 的高度。 您可以将高度更改为 90vh 之类的东西，它似乎可以工作。 或者甚至给它一个以 px 为单位的定义高度。