jquery css高度设置不正常

Question

我正在尝试使用一些jQuery来设置我的产品和目录页面的左右列(带有一个类.columns)到我的高度,#detail <div>其中有一些数据从SQL数据库中提取.

所以,我正在使用这个jQuery代码:

$(document).ready(function() {

  detailHeight = $('#detail').css('height');
  columnHeight = detailHeight + 10;

  $('.columns').css('height', columnHeight 'px');

});

我的页面在这里:http://www.marioplanet.com/product.asp？IDnum = 1

由于某种原因,高度不正确..

任何想法为什么？

谢谢!

Answer 1

你有一个拼写错误:

$('.columns').css('height', columnHeight 'px');

该+丢失:

$('.columns').css('height', columnHeight + 'px');

但是,正如其他人所指出的,使用css()函数访问元素的高度对于代码来说是错误的,因为它返回并期望在数值之后具有CSS单元的字符串.因此,您并不是真正添加数字而是连接字符串.这就是你的代码不起作用的原因.

要修复代码,请使用jQuery的便捷方法height()来获取元素的高度并将其设置为数值.在设置时,只需将您的号码作为参数传递:

  detailHeight = $('#detail').height();
  columnHeight = detailHeight + 10;

  $('.columns').height(columnHeight);