基礎とスクロールペイン100％の問題

Question

私はそれが横幅の全幅に等しくなるセクションを持っています。 jscroll-paneで100％を実行すると2番目の列が表示されますが、横棒が表示されます。98％を指定すると正しく動作しますが、列の全幅ではありません。それが100％に水平バーを追加する理由はわかりませんが、98％ではありません。土台は私の問題を引き起こすか、またはされていない場合、私はわからないが、私は列の外にそれを取ると行に置けば100％だけではない、大6

HTMLで正常に動作します

<section id="component"> 
    <div class="row expanded collapse"> 
     <div class="large-6 column"> 
     <img src="images/image.png">  
     </div> 
     <div class="large-6 column"> 
     <div class="jscroll-pane">  
     Content Here 

     </div>  
     </div>  
     </div> 
</section> 

CSS

.jscroll-pane { 
    display: block; 
    width: 100% !important; 
    height: 400px; 
    max-height: 400px; 
    overflow: auto; 
    background-color: #fff; 
} 


#component { 
    padding: 0px; 
    background-color: #fff; 
} 

jscroll外部CSSファイル

.jspContainer{ 
    overflow:hidden; 
    position:relative; 
    height:100% !important; 
    width: 100% !important; 
} 

.jspPane{ 
    position:absolute; 
    width: 100%!important; 
} 

.jspVerticalBar 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 16px; 
    height: 100%; 
    background: red; 
} 

.jspHorizontalBar 
{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 16px; 
    background: red; 
} 

.jspCap 
{ 
    display: none; 
} 

.jspHorizontalBar .jspCap 
{ 
    float: left; 
} 

.jspTrack 
{ 
    background: #d8d8d8; 
    position: relative; 
} 

.jspDrag 
{ 
    background: #000; 
    position: relative; 
    top: 0; 
    left: 0; 
    cursor: pointer; 
} 

.jspHorizontalBar .jspTrack, 
.jspHorizontalBar .jspDrag 
{ 
    float: left; 
    height: 100%; 
} 

.jspArrow 
{ 
    background: #50506d; 
    text-indent: -20000px; 
    display: block; 
    cursor: pointer; 
    padding: 0; 
    margin: 0; 
} 

.jspArrow.jspDisabled 
{ 
    cursor: default; 
    background: #80808d; 
} 

.jspVerticalBar .jspArrow 
{ 
    height: 16px; 
} 

.jspHorizontalBar .jspArrow 
{ 
    width: 16px; 
    float: left; 
    height: 100%; 
} 

.jspVerticalBar .jspArrow:focus 
{ 
    outline: none; 
} 

.jspCorner 
{ 
    background: #eeeef4; 
    float: left; 
    height: 100%; 
} 

/* Yuk! CSS Hack for IE6 3 pixel bug :(*/ 
* html .jspCorner 
{ 
    margin: 0 -3px 0 0; 
} 

Answer 1

は表示ブロックと変更のオーバーフローを削除し、これを試してみてください：自動隠しに。これがあなたを助けるはずだと思います。

.jscroll-pane { 
    width: 100% !important; 
    height: 400px; 
    max-height: 400px; 
    overflow: hidden; 
    background-color: #fff; 
}