Scroll in div moves content

Question

Being new to the use of div, I am facing some problems which I hope you can help with.

CSS

#wrapperBox {
    width: 100%;
    border-style: solid;
    border-width: 1px 0;
    border-color: #f3a538;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 5px 5px 5px #cccccc;
}

.rullerContent {
    width: 100%;
    height: 465px;
    border: 0px;
    overflow: auto;
}

HTML

<div id="wrapperBox">
  <div class="rullerContent">
    Here is a lot of text, so vertical scroll will appear.....
  </div>
</div>

My problems:

1) The scroll pushes the other content of the page. Can I in some way dedicate space for the scrollbar or hide it (even better), but still get scrolling function?

2) Can I define the height to be "to the bottom of the browser window", so it appears as the text just keeps coming, without having the vertical scroll on the entire page?

Hope you can help and I have been specific.

Regards

have you seen: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — nettux, May 08 '14 at 10:02

score 0 · Accepted Answer · answered May 08 '14 at 10:06

0

You can 'hide' the scrollbar and still have the default behavour (using the mouse wheel) by adding some padding to the right of .rullerContent.

You can use height:100% to make your elements take up 100% of the document screen.

I've changed box-sizing to border-box for .wrapperBox so that the border width is included in the height:

#wrapperBox {
    width: 100%;
    height:100%;
    border-style: solid;
    border-width: 1px 0;
    border-color: #f3a538;
    background-color: #ffffff;
    overflow: hidden;
    box-sizing:border-box;
}
.rullerContent {
    width: 100%;
    height:100%;
    border: 0px;
    overflow: auto;
    padding-right:20px;
}

JSFiddle

Of course you'll not be able to click and/or drag the scrollbar area anymore.. Because you can't see it.

answered May 08 '14 at 10:06

George

36,413
9
66
103

Thanks. It solved the hiding og the scroll bar and the pushing of the other content. But the content of the .rullerContent is not showing in Firefox, but does in Safari. – user3615788 May 08 '14 at 10:28
Seems to be working OK for me in Firefox? What version are you using? – George May 08 '14 at 10:31
Firefox 29.0 for IOS. But when I use the JSFiddle in Firefox it works. So it would seem that some of my coding may conflict? Firebug did not reveal any reasons – user3615788 May 08 '14 at 10:40
Disabling the "overflow:auto" in .rullerContent shows content in Firefox, but without inside scrolling – user3615788 May 08 '14 at 10:59
I'm afraid I don't know the reason for that. Is it just Firefox on IOS that you run into issues with? – George May 08 '14 at 11:06

Scroll in div moves content

1 Answers1