javascript解决方案使变量绝对定位div，下推其他内容

Question

我有一个 JavaScript 多步骤表单，它隐藏了前面的步骤(它们是字段集)并使用 display: none; 显示下一步，它必须绝对定位以获得正确的效果。

• 问题 是定位绝对会把它从流，并且不会下推其下方的内容。
• 我尝试创建的解决方案是将绝对 div 包装在相对定位的父 div 中，然后使用 JavaScript 将父级的高度设置为可见的绝对 div 的高度。

有人可以帮我写 javascript 吗？

现在，我知道在下一个按钮上我需要这样的东西:var divHeight = ((document.getElementById('fieldset').offsetHeight) + 'px'); document.getElementById('variable-div').style.height = divHeight;但是第一部分是错误的，因为我无法通过 ID 获取字段集，我需要获取 display:block 字段集，但我不知道该怎么做

如有任何帮助，我们将不胜感激!

编辑:这里是(更新的)jsfiddle:http://jsfiddle.net/n4dk7/6/

编辑 2:找到解决方案:var fieldsetHeight = $("fieldset").filter(':visible').height() + 'px';
$('#variable-div').height(fieldsetHeight);

Answer 1

我确实看到您找到了解决方案。如果您需要更多想法，这里有一个 fiddle 供您查看:

在下一个和上一个之外

var mainDiv = $( '#variable-div' );
var currentFieldset = $('fieldset');
mainDiv.css('marginBottom', (currentFieldset.height() + 5) + 'px');

下一个里面

next_fs = $(this).parent().next();
mainDiv.css('marginBottom', (next_fs.height() + 5) + 'px');

jsfiddle.net/pertrai1/ydjm2/1/