スクロールバーの幅を計算し、calc（）で結果を使用するCSS

Question

スクロールバーの幅を計算して、結果をCSS calc()宣言で使用したいとします。現時点で

は、私はこのように、スクロールバーの幅は常に 17pxであることを前提としています。あなたが別のブラウザズーム％を選択したとき

body { 
    width:calc(100vw - 17px); 
} 
.container { 
    max-width:calc(100vw - 17px); 
} 

これに伴う問題は、スクロールバーの幅が変化あり。だから私は、これらの線に沿って何かをする計算の結果を使用したい：

body { 
    width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
} 
.container { 
    max-width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
} 

編集：私は今、JavaScriptがに使用されるこのquestion

の助けを借りて問題を解決してきました （ただし、私はあなたがそれ自動アップデートを取得する間隔を必要と発見した）スクロールバーの幅を計算：

function getScrollbarWidth() { 
 
    var outer = document.createElement("div"); 
 
    outer.style.visibility = "hidden"; 
 
    outer.style.width = "100px"; 
 
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps 
 

 
    document.body.appendChild(outer); 
 

 
    var widthNoScroll = outer.offsetWidth; 
 
    // force scrollbars 
 
    outer.style.overflow = "scroll"; 
 

 
    // add innerdiv 
 
    var inner = document.createElement("div"); 
 
    inner.style.width = "100%"; 
 
    outer.appendChild(inner);   
 

 
    var widthWithScroll = inner.offsetWidth; 
 

 
    // remove divs 
 
    outer.parentNode.removeChild(outer); 
 

 
    return widthNoScroll - widthWithScroll; 
 
}

私のコード（機能の結果をCSS calc()宣言に埋め込むために使用されます）。あなたがそれをするので、多くのコードを必要とするのはなぜ

$('body').css({ 
 
    'width':'calc(100vw - ' + getScrollbarWidth() + 'px)' 
 
}); 
 

 
$('.container').css({ 
 
    'max-width':'calc(100vw - ' + getScrollbarWidth() + 'px)' 
 
});

Answer 1

？

それはのJavaScript平野と簡単な方法：

$('body').css({ 
    'width':'calc(100vw - ' + (window.innerWidth - document.body.clientWidth) + 'px)' 
});