我在一个简单的页面中使用mootools 1.2。有一个div显示一个表单（称为formdiv），通过JS / ajax提交。 ajax请求返回一些数据“确认消息”。
然而，formdiv div的起始高度可能是500px，以适应表单元素。当ajax请求返回一个可变长度的返回数据（“已确认提交！”）时，div保持500px高，留下了大量的额外空间。
我的问题是，有没有办法在使用innerHTML更新内容后将div重新收回以适应新内容？
由于
编辑：添加Ajax调用返回的数据可以是可变长度 - 所以我不能假设它将是一定高度然后将div重置为该高度。
答案 0 :(得分：0)
如果您的div使用CSS以预定义高度开始，那么您应该做的就是将其高度设置为auto或在内联设置时完全清除样式。
检查this JSFiddle（这里适用于jQuery，但在涉及浏览器呈现div时无关紧要）
答案 1 :(得分：0)
好的，我意识到这就像一年晚了但我在试图找到一个脚本来解决这个问题时遇到了这个问题。这是一个很好的起点，但我觉得我应该分享我选择使用的方法：
获取$('element')的当前实际高度。
h.before = $('element').getSize().y;
Fx.Morph无法处理height到'auto'的设置，因此您首先必须在height: 'auto'上设置$('element')（如果尚未设置$('element').setStyle('height', 'auto');
$('element').set('html', "Some other content.<br/>Very short.");
h.after = $('element').getSize().y;
已经）然后将html设置为新内容。这将允许您获得新内容的高度。
h.after重置高度，然后使用 $('element').setStyle('height', h.before);
var myEffect = new Fx.Morph('element', {
onComplete: function() {
$('test').setStyle('height', 'auto');
}
});
myEffect.start({'height': h.after});
启动Fx.Morph。
$('element')您可以在此处查看完整代码：http://jsfiddle.net/cd4R9/
请理解这种方法非常基础，为了使这个网站准备就绪，还有很多工作要做。例如，如果您的box-sizing: border-box;有填充，则必须对其进行说明或使用CSS属性{{1}}。希望这会有所帮助。