0

I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:

enter image description here

In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.

These are both aligned using this css:

.center-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

What is the best approach for this?

I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.

Questions:

  • How would I change the style of the header based on wheather the main section has a scrollbar?
  • How would I add padding to the main section based on wheather it has a scrollbar?
  • How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)

I have created a JSbin for this that demonstrates the issue. I am using the material-design-lite style sheets for this.

Roaders
  • 4,373
  • 8
  • 50
  • 71

1 Answers1

0

You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:

http://output.jsbin.com/xuroyaceli/#

Resize the window to see how it looks with a scrollbar.

Joey M-H
  • 763
  • 1
  • 6
  • 15
  • Thanks, I think that is the best approach but I don't know how to apply that to the material-design-lite styles that I am using. I don't want to go too far away from their designs to fix this is that's possible. I really don't like doing the top-padding thing to make the main content go underneath the header. It seems so hacky. I'd like to get away from css hacks like that if possible. – Roaders Feb 19 '16 at 09:59
  • Don't quite understand why you think it's a hack - a fixed position occupies a set area of the screen, and by using a margin or padding, you can instruct your content to make room for this part of the screen. Here's another source that uses the same solution: http://cssreset.com/creating-fixed-headers-with-css/ – Joey M-H Feb 19 '16 at 10:39
  • I know that this is an accepted way of doing this sort of thing but you are modifying the main div so that it can be used in that place and in that way. You have to know when editing that content that you need to leave a gap at the top because of implementation details of the overall layout of the page. That would not be clear if you were editing that content in isolation. It also means that you cannot re-use that content in a different site or part of the site without making changes to it. – Roaders Feb 19 '16 at 10:47
  • Well hopefully you are never editing the CSS of an element in isolation of the overall page layout. If you are referring to editing the content of the element - no, you don't need to leave a "gap", that is part of the style, not the content. The other solutions to this problem will lead to much less reusable code - here we're talking about changing two CSS properties. – Joey M-H Feb 19 '16 at 10:59