【发布时间】：2011-12-06 11:02:34
【问题描述】：
我有一个容器元素，它有点像它的子元素的布局容器，并且我必须根据一些属性来排列子元素。
我需要简单的方法来设置元素的 outerHeight，比如，
$(e).setOuterHeight(200);
jQuery 的 outerHeight 根本不设置高度，实际上它是一个只读方法。
$(e).height(200); // this clips my element
在上述方法中，我松开了文本类型输入的边框。
我的元素的子元素是根据可用空间和其他一些基于它所拥有的数据的标准停靠的，浮动、清除等简单布局将不起作用，因为填充等会根据大小动态变化。我最终会使用 Table，即使我不想但别无选择，但无论如何感谢您的帮助。
现在当元素的大小大于子元素时没有问题，但有时容器元素的高度可能比子元素小，那时我需要增加大小。
function calculateSize(e){
var s = {
width: $(e).innerWidth(),
height: 0
};
var ae = new Enumerator(e.children);
while(ae.next()){
var child = ae.current();
// I have tried all alternatives
// for following lines
// child.clientHeight || child.offsetHeight
// $(child).outerHeight()
// $(child).innerHeight()
s.height += $(child).outerHeight();
}
if(s.height > $(e).height()){
$(e).height(s.height);
}
}
function layoutChildren(e){
....
/// for every child c
/// some steps before
var heightForChildren =
calculatedWithPadMarginBorder(availableHeight,c);
/// tried combinations
$(c).height(heightForChildren);
/// last statement fails for button
/// as button's padding cuts itself
/// removing padding in calculation
/// cuts other input elements !!
/// some steps after
....
}
我需要一些解释如何计算运行时高度/宽度，包括/不包括填充/边距/边框等，以及如何正确设置它，以免遇到问题。我无法继续尝试所有排列组合，因为即使在 jQuery 网站上我也没有看到正确的文档。
固定高度计算很好，但这是一种动态元素，它会调整自身大小并按特定顺序排列子元素。
问题是无法设置outerHeight，当我们设置一个元素的高度/宽度时，高度/宽度实际上是内部高度/宽度而不考虑边距，而当我们要调整父级的大小时，我们需要outerHeight ，但我们不能那么容易地设置outerHeight。
我的 calculateSize 和 layoutChildren 是两个独立的方法和两个独立的算法，因为父级将被调整为所有子级高度的总和。然后高度简单地除以no。的孩子堆叠在一起。我的计算很完美，但是在我的 layoutChildren 方法中，我有元素的“outerHeight”和“outerWidth”，并且不知道如何使用 jQuery 或任何其他方式正确设置它。
【问题讨论】：
标签： javascript jquery html