如何获得以下网站的工作信息，以便如果文本长于容器，（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;，它修复了这个迫在眉睫的问题，但随后的容器不向下延伸至底部，如果疗法e是不够的文本，因为它正确时，有没有灰色背景：

来源

2016-05-11 Edward Tanguay

从容器中取出position:absolute。

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

编辑：所有你需要做的就是给div容器这种风格：

height:100vh;

来源

2016-05-11 16:07:50

如果我删除'position：absolute;'它修复了这个直接的问题，但是如果没有足够的文本，容器不会向下延伸到底部。我在我的文章中添加了上述截图。 –

编辑我的评论。这应该工作。 –

你需要用你想在一个div滚动文本，然后添加一个overflow-y: auto;在div上。这会将滚动条添加到div而不是浏览器窗口。看到这个简单的jsfiddle为例：JSFiddle

来源

2016-05-12 07:04:39 RhysO

没错，但我不想在div的滚动条上，而是在整个页面上。例如，当我删除'position：absolute'时，我得到我想要的，但是如果没有足够的文本，那么容器不会延伸到底部。我在我的文章中添加了上述截图。所以我不知何故必须让白色容器向下延伸到浏览器窗口的底部。我在'.container'，'html'和'body'上尝试过'min-height：100％'和'height：100％''的各种组合，但无济于事。 –

好吧，我采取了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内容的数量。

因此，如果有人有这个问题的更一般的解决方案，请不要犹豫分享。

来源

2016-05-12 09:16:28

如何从滚动容器底部滚动文本，但将滚动条保持在浏览器的最右侧？

附录

回答

相关问题