【问题标题】：How to get text from scrolling off bottom of container, yet keep scroll bar on far right of browser?如何从容器底部滚动获取文本，但将滚动条保持在浏览器的最右侧？
【发布时间】：2016-05-12 21:39:31
【问题描述】：

我怎样才能让以下网站工作，以便如果文本比容器长，（1）文本不会滚动到底部，以及（2）滚动条在浏览器的右侧而不是在容器的右侧？

(我想要滚动条在浏览器右侧的原因是因为如果它在容器的右侧，那么当光标在灰色区域时鼠标滚轮不起作用，这是一个令人不安的用户体验。）

<!DOCTYPE html>
<html>
    <head>         
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>     
        <style type="text/css">      

            .pagecontent {
                margin: 0 18px;
            }

            /* bootstrap override */
            .container {
                width: 100%;
                padding: 0;
            }
            .navbar {
                border-radius: 0px;
            }

            .navbar-text {
                float: left !important;
                margin-right: 10px;
            }
            .navbar-right {
                float: right!important;
            }

            .navbar-nav>li>a {
                padding-top: 15px;

                padding-bottom: 15px;
            }

            .navbar-nav {
                margin-bottom: 0;
                margin-top: 0;
                margin-left: 0;
            }


            /* viewport lg */
            @media (min-width: 1200px) {
                .container {
                    width: 1024px;
                    padding: 0;
                    background-color: #fff;
                    position:absolute;
                    top:0;
                    bottom:0;
                    left:0;
                    right:0;

                    /* overflow-y: auto; TEXT DOESN'T EXTEND OFF BOTTOM (GOOD), BUT SCROLL BAR IS ON CONTAINER NOT ON RIGHT OF BROWSER (BAD)*/
                }
                html{
                    min-height:100%;/* make sure it is at least as tall as the viewport */
                    position:relative;
                }
                body{
                    height:100%; /* force the BODY element to match the height of the HTML element */
                    background-color: #999;
                    /* overflow-y: auto; SCROLLBAR ON RIGHT OF BROWSER (GOOD) BUT TEXT EXTENDS OFF BOTTOM (BAD) */
                }
            }
        </style>
    </head>
    <body>

        <div class="container">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header pull-left">
                        <a class="navbar-brand" href="?">Bootstrap Showcase</a>
                    </div>                

                </div>
            </nav>
            <div class="pagecontent">

                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>
                <div>this is a test line</div>

            </div>
        </div>
    </body>
</html>

附录

如果我删除position: absolute;，它会解决这个直接的问题，但是如果没有足够的文本，容器不会向下延伸到底部，因为它在没有灰色背景时是正确的：

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您需要将要滚动的文本包裹在 div 中，然后在 div 上添加 overflow-y: auto;。这会将滚动条添加到 div 而不是浏览器窗口。请参阅这个简单的 JSFiddle 示例：JSFiddle

【讨论】：

对，但我不想滚动条在div 上，而是在整个页面上。例如，当我删除 position:absolute 时，我得到了我想要的，但是如果没有足够的文本，容器不会向下延伸到底部。我在我的帖子中添加了上面的截图。所以我不得不让白色容器向下延伸到浏览器窗口的底部。我在.container、html 和body 上尝试了min-height: 100% 和height:100% 的各种组合，但无济于事。

【解决方案2】：

好的，我通过取出position:absolute 然后添加居中的白色背景图像解决了这个特定布局的问题：

            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;

但是，虽然这适用于这个特定的布局，但它不会工作，例如您有一个页脚，它在所有较小的视口上都固定在页面底部，但在最大的视口上可能会跳到页面中间的某个位置，具体取决于.container 中有多少 html 内容。

所以如果有人对此问题有更通用的解决方案，请不要犹豫分享。

【讨论】：

【解决方案3】：

从容器中删除position:absolute。

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

编辑：您需要做的就是为容器 div 赋予这种样式：

height:100vh;

【讨论】：

如果我删除position: absolute;，它会解决这个直接的问题，但是如果没有足够的文本，容器不会向下延伸到底部。我在我的帖子中添加了上面的截图。