滾動條與固定格的內容重疊

Question

我在右側有一個固定格（購物車列表）。如果項目太多，則會出現滾動條。問題是，它部分覆蓋了固定分區。當滾動條出現時，如何讓div向左推，以免被覆蓋？

我的CSS：

/* sidebar-right */ 
#sidebar-wrapper-right { 
    margin-left: -250px; 
    right: 0; 
    width: 250px; 
    background: #F5F5F5; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    top: 60px; 
} 

.sidebar-nav-right { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.sidebar-nav-right li { 
    line-height: 40px; 
    text-indent: 20px; 
} 

.sidebar-nav-right li a { 
    color: #555; 
    display: block; 
    text-decoration: none; 
} 

.sidebar-nav-right li a .item-count { 
    margin-top: 10px; 
    padding-left: 0; 
    margin-right: 5px; 
} 

.sidebar-nav-right li a:hover { 
    color: #000; 
    background: rgba(255,255,255,0.8); 
    text-decoration: none; 
} 

.sidebar-nav-right > .sidebar-brand { 
    height: 65px; 
    line-height: 60px; 
    font-size: 18px; 
} 

.sidebar-nav-right > .sidebar-brand a { 
    color: #000; 
} 

.sidebar-nav-right > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

#sidebar-wrapper-right .sidebar-nav-right .sidebar-right-trash { 
    display: inline; 
    margin-right: -10px; 
    top: 12px; 
} 

#sidebar-wrapper-right .sidebar-nav-right .sidebar-right-trash:hover { 
    background: none; 
} 

和HTML：

<div id="sidebar-wrapper-right"> 
    <ul class="sidebar-nav-right"> 
     <li class="sidebar-brand">[Shopping Cart]</li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">5</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <li> 
      <a href="#" class="glyphicon glyphicon-trash sidebar-right-trash pull-left"></a> 
      <a href="market/#">[X] <span class="badge pull-right item-count">10</span></a> 
     </li> 
     <hr class="sidebar-seperator"> 
    </ul> 
</div> 

Answer 1

你可以做這樣的事情

http://jsfiddle.net/fqz68/

爲子div添加padding

Answer 2

將列表放入一個小的，幾乎不可見的表格中，並將一些單元格填充到側面。這會將列表保留在屏幕的一側。或者你可以很明確放置表成使用不會影響一個現在的位置：

//PUT the and right pixels in the number that the scroll bar is generally. 
<IMG STYLE="position:absolute; right:(NUMBER OF PIXELS AWAY FROM THE RIGHT)px> 

我個人使用絕對位置，但是這只是我。

樂意幫忙！

Answer 3

添加一個修補高度到側邊欄

#sidebar-wrapper-right { 
    margin-left: -250px; 
    right: 0; 
    width: 250px; 
    background: #F5F5F5; 
    position: fixed; 
    height: 300px; /*or max-height:300px;*/ 
    /*height: 100%;*/ 
    overflow-y: auto; 
    z-index: 1000; 
    top: 60px; 
} 

Answer 4

取下div元素overflow-y:auto;，並添加到overflow-y:auto; height:100% UI元素。 http://jsfiddle.net/gLdCg/