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.

badAtHooks
  • 139
  • 1
  • 3
  • 10
  • It might be useful to add the rendered HTML and CSS to demonstrate the problem. Here's an [example](https://jsfiddle.net/k59burqL/). – showdev Jun 27 '19 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. – Michael Benjamin Jun 27 '19 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? – badAtHooks Jun 27 '19 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](https://i.stack.imgur.com/pAgK3.png). For future interest, see [Tools to selectively copy HTML+CSS+JS from existing sites](https://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-existing-sites). – showdev Jun 27 '19 at 21:30

2 Answers2

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

Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
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?

doutor
  • 66
  • 5