2016-07-23 3 views
0

何が起こるのですか?ブラウザのウィンドウがどれほど狭いかに関わらず、垂直スクロールバーが表示されると思います。グリッド内のコンテンツは動的ですが、この問題はグリッド内の行数とは関係がないようです。スクロールバーは、ブラウザのウィンドウが一定のサイズである場合に表示され、ウィンドウが拡大されるにつれて残りますが、ウィンドウが縮小されると消えます。高さは動的で、JavaScriptを介してスタイル属性として要素によって設定されます。CSS:ブラウザのサイズを変更すると、垂直スクロールバーが消えます(絞り込み)

<div id="mycontainer" class="mydiv" style="height: 142px;"></div> 
<style> 
    .mydiv {  
     background-color: white;  
     border-color: #d8d8d8;  
     border-style: solid;  
     border-width: 0 1px 1px;  
     height: 100%; 
     width: 100%  
     margin: 0;  
     overflow-y: auto;  
     padding: 0;  
     position: relative;  
    } 
</style> 
+0

あなたのjavascriptを見ずに、私は確かに言うことはできません。しかし、JSFiddleでは、border-width-propertyは1pxをdivの最後に追加するので、100%+ 1pxの高さになります。オーバーフローがautoに設定されている場合は、これが最も確実にscollbarをトリガーします。これを回避するには、ボックスサイズを枠に設定します。 これはどのブラウザでも動作するはずです。http://caniuse.com/#search=box-sizing – zoku

+0

提供したコードのみで問題を再現することはできません。 –

答えて

0

ああ状況は、あなたがそのあなたはdivの内部には、コンテンツを持っていない事実は、スクロールバーを示すからのdivを妨げているオーバーフロー-Yを、使用しているである、多分あなたはdiv要素でplnkrを共有することができ内容は?

+0

'overflow-y:auto'は、必要に応じて垂直スクロールバーのみを表示することを意味します。 –

+1

コンテンツがないため、今は必要ない*ため、Plnkrの作成をお勧めします。 –

+0

しかし、私はブラウザウィンドウの幅ではなく、高さを変えています。したがって、グリッド内の行数は一定のままです。ブラウザが縮小または拡大されていても、すべての行を表示するには垂直スクロールバーが必要です。 – stumped

関連する問題