jQuery高度問題（值）

我很新的jQuery（從字面上今天開始使用它），所以我打賭我錯過了一些非常明顯的東西。jQuery高度問題（值）

我正在使用VS 2010中的jQuery 1.5.2和ASP.NET 3.5。我試圖動態地將一個div容器的高度設置爲另一個div容器的高度。後者div增長以適應內容，並且我需要兩者在高度上相等，否則它看起來很糟糕。

我曾嘗試下面的代碼中的Site.Master文件的標題：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var newHeight = $("#content").height() + "px"; //Also tried without + "px" 
     $("#sidebar").height(newHeight); 
    }); 
</script>

這是做什麼...。第一個div的頂部與第二個的底部呈現在一起;不過，我不太確定它們是否處於同一高度。

我現在在Firefox 10.0.2上使用它;我沒有檢查任何其他版本或瀏覽器。

任何幫助表示讚賞。

來源

2012-03-13 William Smith

使用cosole.log（）或警告（），什麼是'newHeight'值（沒有'px'，因爲它不需要）？ – shaunsantacruz 2012-03-13 23:56:47

第一：.height使用沒有「PX」

二：這個代碼將設置#sidebar的高度等於＃內容的高度時，文檔加載完全。

所以，如果你只是想這樣做，這段代碼應該足夠了。

但是，如果元素的高度發生了變化（如使用ajax請求獲取更多內容並將其設置爲#content），則每次更改#content的高度時都必須調整#sidebar高度。

關於這些元素的位置的問題，應該是在你的CSS一些錯誤..講講他們的浮動性..

來源

2012-03-13 23:53:27

錯誤是我的CSS的組合，並且不知何故，我在我的代碼中顛倒了「content」和「sidebar」的順序。我可能試圖聰明地處理那些通常會對我造成不利影響的事情。謝謝！ – 2012-03-14 19:01:24

不客氣，@威廉史密斯 – 2012-03-15 03:18:04

這個工作對我來說：

<div id="content" style="float:left; width:100px; height: 200px; background: red;">This is the content</div> 
<div id="sidebar" style="float:left; width: 50px; background: blue;">This is the sidebar</div> 

$(document).ready(function() { 
    var newHeight = $("#content").height(); 
    $("#sidebar").height(newHeight); 
});

http://jsfiddle.net/K2fmT/

來源

2012-03-13 23:54:06

沒有你的px，它沒有任何問題。

您還可以使用jQuery的API，並嘗試使用equalizeHeights()做到這一點就像這個例子：

How to use equalizeHeights

來源

2012-03-13 23:56:34 ChapMic