Reputation: 149
My goal is to set up a layout with a sticky header and left sidebar, and non-sticky DashboardBody
(the green-bordered box) that can be scrolled through (in which case the content at the top disappears "under" the sticky header). I'm using styled-components, and the two boxes under the header are wrapped in a BelowNavContainer
that is using flexbox.
The component ProjectContainer
encloses the entire view (including the header and sidebar as well). Since I only want a scrollbar on the DashboardBody
part, I set overflow: auto
for that and overflow: hidden
for ProjectContainer
. However this results in the user being unable to see the bottom of DashboardBody
- the bottom of the scrollbar (with the downward pointing arrow) is not visible either.
If I set overflow: auto
for ProjectContainer
then an additional scrollbar is added, and I can scroll to the bottom of DashboardBody
using these 2 scrollbars. But obviously, I only want one scrollbar.
What am I doing wrong and how can I fix this?
I've looked at related "overflow not working" questions. Their solutions did not work as I already do have a height
value specified.
Working demo: https://codesandbox.io/s/overflow-woes-i4dww
Note: it seems like CodeSandbox itself adds a scrollbar to the view, so I think the outermost one can be ignored. With webpack-dev-server (from create-react-app) on my own machine, I have one fewer scrollbar than what CodeSandbox shows.
I expect DashboardBody
to have a scrollbar that lets me scroll to the bottom of the div. I only want this component to have a scrollbar, i.e. the scrollbar should not start at the top of the screen alongside the header.
Currently, I can't seem to reach the bottom of its scrollbar without adding another scrollbar to its enclosing div, ProjectContainer
.
Upvotes: 0
Views: 3322
Reputation: 3994
The problem is with BelowNavContainer
Component.
You've set its height to 100vh, but notice that there is header above it, so the total height of the full page now is :
header Height + 100vh(BelowNavContainer height).
and as you put thier parent component: ProjectContainer
height to 100%, overflow: hidden
, this will hide the bottom of the DashboardBody' component.
Solution:
to put height of BelowNavContainer
as follows:
height: calc(100vh - 100px)
as 100px:is the hieght of your header
you can see this wrking demo
Upvotes: 2
Reputation: 66
Your header has 100px height, and the content below has 100vh (means the entire screen). If you want to achieve the bottom without using another scrollbar, you should change the content height to: calc(100vh - 100px). Is it what you are looking for?
Upvotes: 1