處理滾動條和jquery.width（）方法

jQuery的.width()方法似乎沒有考慮滾動條。這對我來說是個問題，因爲我想將一些孩子的寬度設置爲等於父母的寬度。我用jQuery的類似於以下：處理滾動條和jquery.width（）方法

$('#contentDiv').width($('#containerDiv').width())

在這個例子中，是#contentDiv我想尺寸的元件，我想將其設置爲具有#containerDiv寬度，這是它的父元素。我的問題是，這切斷的#contentDiv一側，如this fiddle.

在我實際的代碼所示，我有我的jQuery上漿幾個要素，這都需要以適合滾動DIV，所以只設置#contentDiv到100％的css不是一個選項。在jQuery中處理div的滾動條寬度的最佳方式是什麼？

來源

2013-04-12 ckersch

存在一個問題，因爲不同的瀏覽器以不同的方式實現滾動條。IE將滾動條放在div區域之外（根據標準文檔，它實際上是正確的），而所有其他瀏覽器實際上都在該區域內部具有滾動條。在研究這個領域時要記住一些事情。 – krillgar

可能重複[jQuery的 - 如何獲得屏幕寬度沒有滾動？]（http://stackoverflow.com/questions/8339377/jquery-how-to-get-screen-width-without-scrollbar）（使用'innerWidth（）'）？ – fcalderan

這是一個混亂的主題，因爲它在所有瀏覽器中都不一致。有些會給你一個內部寬度，有些會給你滾動條的寬度。我認爲您可能需要提出針對您計劃支持的每個瀏覽器的解決方案 –

我發現解決此解決方案的工作，而最好的解決辦法是這樣的：

http://chris-spittles.co.uk/?p=531

jQuery是全能的，一切，但有時原生JS的小破折號是所有你需要渲染像素完美的網頁。 ..我希望你會發現這個解決方案很有幫助！

來源

2013-04-12 16:39:51 banjoSas

更新：

jQuery的寬度調查方法的無佔滾動條。在我最初的例子中，使用.innerWidth(true)看起來像它的工作，但只是因爲它返回和對象，這導致width失敗，並且內部內容大小自己以適應可用空間，因爲該示例不是很好。但是，可以編寫一個函數來計算帶有滾動條的div中的可用空間，然後可以根據需要使用它來定位內容。

要寫這個函數，我利用了這樣一個事實，當一個div附加到一個帶有滾動條的div上時，它佔用了全部可用寬度（即，父母的內寬減去寬度滾動條的）。

功能如下：

function noScrollWidth(div){ 
    var measureDiv = $('<div id="measureDiv">'); 

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
};

然後我用這個大小我的內容股利：

$('#contentDiv').width(noScrollWidth($('#containerDiv')));

Working fiddle.

來源

2013-04-12 16:42:43 ckersch

將參數傳遞給innerWidth *設置元素的內部寬度。 'true'不是一個有效的參數，但它仍然意味着它將返回元素，而不是寬度。 –

不錯，當我使用'innerWidth（true）'時，它看起來像我的例子實際上是在默默地失敗。我已經添加了一個不同的解決方案。請讓我知道這對你有沒有用！ – ckersch

感謝您的編輯 - 我刪除了我的downvote。我試圖解決的問題是找到一個元素寬度，排除滾動條，'$（myElementSpec）[0] .clientWidth'似乎是最好的解決方案。這個答案幫助我到達：http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively –

試試這個：

$('#contentDiv').width($('#containerDiv')[0].clientWidth)

對於鐵道部有關該解決方案的信息，請參閱this StackOverflow answer。

來源

2014-10-25 00:16:01

我嘗試的另一種方法是將兩個元素'box-sizing property設置爲'border-box'，並查看是否將contentDiv的寬度設置爲100％，然後以您想要的方式工作。

現在越來越少的項目不再擔心舊式瀏覽器，'邊框'可以讓事情變得更容易。不過，一定要在多個平臺上測試多個瀏覽器，因爲我不確定它們是否都以相同的方式處理滾動條。

來源

2014-10-25 00:18:06

處理滾動條和jquery.width（）方法

回答

相關問題