13

I have a page with the following HTML structure...

<html>
    ...
    <body>
        <div class="wrapper">
        ...
        </div>
    </body>
</html>

The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.

My CSS is as follows:

html {
    overflow-x: scroll;
    height: 100%;
}

body {
    overflow: auto;
}

.wrapper {
    min-width: 1100px;
    margin: 0 auto;
}

For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.

Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg

And a codepen: http://codepen.io/anon/pen/ocxvs

Thanks in advance for any help!

Sarah
  • 744
  • 2
  • 9
  • 26
  • A jsfiddle.net would be super handy :) – SW4 Aug 08 '14 at 09:41
  • I was having trouble replicating the problem in codepen but have just managed to, here you go: http://codepen.io/anon/pen/ocxvs Thanks! – Sarah Aug 08 '14 at 09:43

1 Answers1

14

Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).

Simply change your CSS to:

html,body{
  height:100vh;
  width:100vw;
  margin: 0;
  padding: 0;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • This is working great on the codepen but on my actual site all scrollbars have now disappeared (including vertical). Unfortunately I can't send you a link to it though. I think there must a rogue `overflow: hidden` tag somewhere in the (rather large) stylesheets! Thanks for your help. – Sarah Aug 08 '14 at 09:56
  • 2
    Found it - I was right. The body had an `overflow: hidden` tag on a separate stylesheet. Thanks again! :) – Sarah Aug 08 '14 at 09:58