把滾動條放在div與自動溢出

我有一個小格子與overflow:auto;但當滾動條出現時，它覆蓋了大量的div。這可以通過使用overflow:scroll;來避免，但是當沒有溢出時，您會看到難看的褪色滾動條。沒有使用overflow:scroll;將滾動條放在div之外的方法？謝謝。把滾動條放在div與自動溢出

這裏是一個示範jsfiddle

.alphabet{ display:inline-block; 
      overflow-y:auto; 
      overflow-x:hidden; 
      border:1px solid; 
      height:50; 
     } 

<div class = "alphabet">abcdefgh<br> 
         ijklmnop<br> 
         qrstuvwx 
</div>

來源

2013-04-30 user2014429

如果它是一個選項使用.alphabet左右的容器元素，你可以設置垂直滾動。我添加了<hr>來僞造一個始終可見的底部邊框，該底部邊框也不會位於滾動條下方。

HTML：

<div class="container"> 
    <div class="alphabet"> 
     abcdefgh<br /> 
     abcdefgh<br /> 
     abcdefgh<br /> 
     abcdefgh<br /> 
    </div> 
</div> 
<hr>

CSS：

.container{ 
    overflow-y:auto; 
    overflow-x:hidden; 
    height:50px; 
    width:100px; 
} 

.alphabet{   
    width:100%; 
    overflow:visible; 
    box-sizing:border-box; 
    border:1px solid; 
    border-bottom:0; 
} 

hr{ 
    margin:0; 
    height:0; 
    width:85px; 
    border:0; 
    border-bottom:1px solid; 
}

隨着內部邊界：http://jsfiddle.net/Q32gG/1/

如果你不真正關心的邊框內顯示滾動條，你可以刪除<hr>，並將完整邊框添加到.container而不是（http://jsfiddle.net/V3MbV/3/）。

來源

2013-04-30 19:03:50 Lily

而不是使用外，滾動條，爲什麼不使用一些右填充爲使

.alphabet{ display:inline-block; 
       overflow-y:auto; 
       overflow-x:hidden; 
       border:1px solid; 
       height:50; 
       padding-right:15px; 
      }

或者，如果你願意的話，使用em單位來匹配不論大小，您使用

padding-right:1em;

PD字符：通過那裏的路在你的例子中是一個錯字。這個時間段應該是之前它應該是.alphabet {

來源

2013-04-30 18:31:51 Fico

但是如果沒有顯示滾動條，填充應該是0（或小於15）。 – Cromax 2014-07-19 09:37:58

但是在Chrome中，它仍然佔據了div內的空間，即使它被放置在它外面。 – 2016-08-23 05:39:08

把滾動條放在div與自動溢出

回答

相關問題