附录

Question

如何使以下网站正常工作，以便文本比容器长，（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;，它会解决这个直接问题，但如果没有足够的文本，容器不会向下延伸到底部，因为在没有灰色背景时它会正确执行：

Answer 1

从容器中删除position:absolute。

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

编辑：你需要做的就是给这个样式的容器div

height:100vh;

Answer 2

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

Answer 3

好的，我通过取出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 个答案: