0

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.

Improve this question
4
  • It might be useful to add the rendered HTML and CSS to demonstrate the problem. Here's an example. Commented Jun 27, 2019 at 18:49
  • I came up with a solution for you, but the class names change on refresh, making a revised demo unnecessarily tedious. It's always better to post compiled code in the question itself. Commented Jun 27, 2019 at 18:51
  • thanks for the feedback @showdev my bad for this noob question but for future reference how would I go about doing that if I'm writing the code in codesandbox or a similar playground? Commented Jun 27, 2019 at 21:19
  • No worries. I think it might depend on which browser you're using. I coped the HTML from the element inspector in my browser's developer console and then copied the generated stylesheet. For future interest, see Tools to selectively copy HTML+CSS+JS from existing sites. Commented Jun 27, 2019 at 21:30

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

It seems you've also changed body { margin:0; }. You might mention that in your answer.
yes to insure removing 8px margin that are applied by default to body in react
1

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?

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.