小屏幕上

我有一個簡單的代碼來一列，id="colLeft"的高度設置爲另一列，id="colRight"的高度，沒有填充或邊框的Javascript DOM的offsetHeight問題：小屏幕上

<script type="text/javascript"> 
    var colLeft = document.getElementById("colLeft"); 
    var colRight = document.getElementById("colRight"); 
    colLeft.style.height = colRight.offsetHeight + "px"; 
</script>

此代碼工作正常在臺式機和iPad上，但在我的android手機上，結果相當難以預測。有時候，colLeft會更長，有時會colRight，有時會按照它應該的方式工作。我曾在兩個瀏覽器上嘗試過，結果相同。

我也在window.onload=function(){...}裏面試過了，結果略有差異，但還不完美。

感謝您的任何幫助。

來源

2013-01-24 chuckieDub

你試過jQuery嗎？你可以使用'$（document）.ready（function（）{...}）'而不是'window.onload'你也可以使用'$（window）.length（）'而不是'offsetHeight'這可能是您的問題的可接受的解決方案。 – ModernDesigner

我希望能夠在不使用庫的情況下解決這個問題，但我會考慮它。 – chuckieDub

我發現自己在那個綁定有時...有時我希望佈局引擎會自動支持jQuery/Modernizr/Dojo/RoR。當然，由於顯而易見的原因，這絕不會發生。 – ModernDesigner

您可以閱讀關於offsetHeight here的一些信息。重要的是要注意的是，如果內容大於可瀏覽區域，則瀏覽器可能會使用非滾動元素進行有趣的事情。由於這是手機瀏覽器，我猜測問題在於它錯誤地計算了列高度，因爲它沒有正確處理滾動元素。

如何設置第一列的高度？如果它已經在樣式表中的有效高度設置，你可以很容易地做這樣的事情：

colLeft.style.height = colRight.style.height;

如果不工作，你可能需要基於瀏覽器窗口大小的東西，如設置列高：

colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";

或類似的東西。

來源

2013-01-24 07:11:01

回答

相關問題