2011-03-07 70 views
1

我有兩列的頁面,並儘量讓他們使用jQuery相同的高度。我有以下代碼不正確的jQuery高度

<script type="text/javascript"> 
$(document).ready(function() { 
     var right_column_height = $("#right-column-wrapper").height() 
     var content_height = $("#content-wrapper").height() 
     console.log("content = " + content_height) 

     if(right_column_height > content_height) $("#content-wrapper").css("height", right_column_height) 
     else $("#right-column-wrapper").css("height", content_height) 
}) 
</script> 

如果右列是更高,它的正常工作,但是噹噹含量越高,其在一個頁面上行事古怪...... 預期高度設置,其他頁面上它不工作在所有... 我加了控制檯日誌記錄,看看發生了什麼,我看到的內容高度是不是在jQuery的計算...但是,當我再輸入相同的代碼來安慰,我得到一個corret值... 您能否有什麼錯在我的代碼,請...

看到http://demo.romanpriryl.cz演示,有問題的網頁是http://beta.romanprikryl.cz/fotogalerie.htm,但你爲什麼要使用JavaScript來解決,可以利用CSS容易固定的問題上http://beta.romanprikryl.cz/objednavky.htm

+0

嘗試增加'px'爲值:'$( 「#右列包裝」)的CSS( 「高度」,content_height + 「PX」);'沒有它,其它單元可能適用。此外,如果內容包裝已絕對定位或浮動元素,高度將不能正確計算,因爲這... – 2011-03-07 11:16:09

+0

我第一次使用$(「#右列包裝」)。CSS(「高」),以獲得高度,並給出了'px'的值,但結果是相同的 – 2011-03-07 11:23:37

回答

0

正常工作?

例如,見this tutorialthis one as well

+1

我在div上使用漸變背景和圓角,所以對於給定的例子它看起來很奇怪......或者我只是沒有弄清楚在我的情況下如何正確使用它們......如果你知道,請建議,我最好使用CSS然後JavaScript – 2011-03-07 11:10:42

4

我已經解決了我的問題,當我把代碼調整到setTimeout函數... 1個milisecond的延遲就足夠了,但我仍然不明白爲什麼它的沒有工作沒有這個...可能頁面高度是在文檔準備好之後以某種方式計算的

+0

確實很奇怪。感謝分享! – 2011-03-07 12:25:23

0

如果#right-column-wrapper或#content-wrapper元素具有沒有指定尺寸的圖像,那麼jQuery將返回高度的容器減去這個圖像的高度。

這是因爲圖像沒有在$(文件)。就緒()尚未加載(這也是爲什麼setTimeout的工作最可能的原因)。

爲了解決這個問題,要進去$元素的高度放置代碼(窗口).load()。

例如

$(window).load(function() { 
    var right_column_height = $("#right-column-wrapper").height() 
    var content_height = $("#content-wrapper").height() 
    console.log("content = " + content_height) 

    if(right_column_height > content_height) $("#content-wrapper").css("height", right_column_height) 
    else $("#right-column-wrapper").css("height", content_height) 
}); 

或者,您可以在HTML中設置圖像寬度和高度,jQuery將確定元素的正確高度值。