ページ上の複数のスクロールバーを避ける最善の方法は何ですか？

Question

トップメニューバー、サイドバー、メインコンテンツエリアがあるページがあります。 上部メニューバーが配置されています。 メインコンテンツエリアには絶対位置があり、多くのウィジェットが含まれています。 ウィジェットの数が増えると、コンテンツ領域の高さがブラウザのウィンドウの高さよりも大きくなり、コンテンツ領域の2番目のスクロールバーがウィンドウスクロールバーの直前に表示されます。

メインコンテンツエリアにウィンドウスクロールバーを使用する方法はありますか？ブラウザウィンドウのスクロールバーを避けるために

.menubar{ 
    height: 50px; 
} 


.sidebar{ 
    left: 4px; 
    position: absolute; 
    top: 100px; 
} 

.content{ 
    position: absolute; 
    overflow: auto; 
    top: 47px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

Answer 1

はoverflow:hiddenにbodyとhtmlを設定します。

メインコンテンツ領域をoverflow-y: scroll（常にスクロールバーを表示）に設定します。

html, 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

メインコンテンツとサイドバーの高さを設定するには、レイアウトのこの種の

.side-bar, 
.main { 
    height: calc(100% - 50px); 
} 

、floatは絶対にそれに対処することができます。 position:absoluteは間違いなく過剰です。