How To Get Text From Scrolling Off Bottom Of Container, Yet Keep Scroll Bar On Far Right Of Browser?

How can I get the following site to work so that if the text is longer than the container, (1) the text does not scroll off the bottom, and (2) the scrollbar is on the right side o

Solution 1:

You need to wrap the text you want to scroll in a div, then add a overflow-y: auto; on the div. This will add a scrollbar to the div and not to the browser window. See this simple JSFiddle for an example: JSFiddle

Solution 2:

Ok, I solved this problem for this particular layout by taking out position:absolute and then adding a centered background image of white:

            background-color: #999;
            background-image: url('images/system/background_white_page.png');
            background-repeat: repeat-y;
            background-attachment: fixed;
            background-position: center; 
            background-size: 1024px 1px;

But while this works for this particular layout, it would not work if e.g. you had a footer which was anchored to the bottom of the page on all of the smaller viewports but on the largest could jump to the middle of the page somewhere depending on how much html content was in the .container.

So if anyone has a more general solution to this problem, please don't hesitate to share it.

Solution 3:

Remove position:absolute from container.

http://codepen.io/ruchiccio/pen/VaRXKO

EDIT: All you need to do is give the container div this style:

height:100vh;