純粋なCSSでこれを行うにはどうすればいいですか？

Question

ページの右側にサイドバーDIVが浮いています。サイドバーのCSS

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 22px; 
    border: 3px solid #73AD21; 
    max-width: 300px; 
    overflow:scroll; 
    } 

私は現在のウィンドウサイズを変更したりズーム（の検出に呼び出された

function handleResize() { 
    var sbw = document.getElementById('sidebar').offsetWidth; 
    var ww = document.documentElement.clientWidth || document.body.clientWidth; 
    var bodyWidthVal = 1000; 
    $("body").css('width', Math.min(bodyWidthVal,(-9 + ww - sbw))); 
} 

javascript関数を使用して、サイドバーと重なってからの私のページの本体でコンテンツを防止しています後者はマウスホイールイベントを介して捕捉された）。私が使用しているウェブブラウザ（IE 11）とサイドバーのオフセットの幅がサイドバーの周りの枠線の幅をキャプチャしていないように見えるので、マジックナンバー '-9'も何とか必要です。

これは機能しています。純粋なCSSで達成できるのであれば、むしろこのklugyソリューションを取り除くことになります。

Answer 1

JavaScriptをまったく必要としない、はるかに単純な解決策（実際にはいくつかあります）があります。

あなたのコンテンツとサイドバーを浮かせて、完了しました。

スタティックユニットの操作は、特定のビューポートでのみ有効です。また、CSSではwidthおよびheightプロパティはコンテンツ領域のサイズにのみ関連します。パディング、ボーダー、マージンはそれ以上の大きさの別々のサイズです。このデフォルトの動作は、コンテンツ、パディング、およびボーダー（余白はまだ含まれていない）に従ってサイズを設定する任意の要素にbox-sizing:border-boxを設定することで、CSSでオーバーライドできます。ただ、右にサイドバーを浮遊し、あなたに行わ

/* Change box model default sizing so that padding and borders are 
 
    counted into the width of an element */ 
 
* { box-sizing:border-box; } 
 

 
#wrapper { 
 
    width:100vw; /* as wide as the viewport */ 
 
} 
 

 
#mainContentArea { 
 
    border:1px solid black; 
 
    background-color:#e0e0e0; 
 
    width:80%; 
 
    float:left; /* align element to left of row allowing next element to float up */ 
 
    height:100vh; 
 
} 
 

 
#sidebar { 
 
    border:1px solid red; 
 
    background-color:#808080; 
 
    width:20%; 
 
    float:left; /* float to left until another floated element is found */ 
 
    height:100vh; 
 
    min-width:100px; /* Don't let the sidebar get smaller than 100px */ 
 
}

<div id="wrapper"> 
 
    <div id="mainContentArea"> 
 
    
 
    </div> 
 
    <div id="sidebar"> 
 
    
 
    </div> 
 
</div>

Answer 2

divで重複しないように計算をCSSに適用できます。例：CSSで

<div class="right-sidebar"></div> 
<div class="main-body"></div> 

：

.right-sidebar{ 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 300px; 
} 
.main-body{ 
    width: calc(100% - 300px); 
    height: 1000px; 
} 

サイドバーの幅を動的に変化されている場合、あなたはJSの幅を取得することができますし、JSに応じて、本体の幅プロパティを変更します。