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

Question

Here is a code sandbox that defines a Logs React component and works great.

It uses react-scroll-to-bottom to show a page with a header and some logs. Note that because we use a flexbox, the size of log section grows perfectly to fit the height of the screen.

Now I want to place this Logs component inside an App component. The problem is that now the log section is too tall and another scrollbar appears in addition to the scroll-to-bottom scrollbar. You can see this here .

I think this is because we use 100vh for the height of the Logs component. The problem is, if I change this to 100% , ScrollToBottom breaks and displays the full log content as if it were a normal div. It seems like ScrollToBottom requires a specific type of height such as px , em or vh to work. I'm not sure where to go from here.

How do I grow ScrollToBottom to fill the height of the screen?

Answer 1

This issue is indeed with using 100vh. You're not accounting for the height of the header. You could change the height to something like 90vh and it seems to work. Or even give it a defined height in px.