如何獲得以下網站的工作信息，以便如果文本長於容器，（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

如何從滾動容器底部滾動文本，但將滾動條保持在瀏覽器的最右側？

附錄

回答

相關問題