jquery - Position div after another element which is in a form

Question

Hello I would like to position absoulte a div after a filedset in a form but the form has another container element and the fieldst's height is not fixed it is changing by content inside it. I made this with jQuery but is doesn't work. Oh and I can't put the div inside the form because that div contains another form.

<script>
  $(function(){
  var heightOfform = document.getElementById("form").scrollHeight;
  var heightOffsomethingafter = document.getElementById("somethingafter").scrollHeight;
  document.getElementById("divtoposition").css('top', (heightOfform-heightOffsomethingafter)+'px');
  });
</script>
<style>
#all {position:relative;}
#divtoposition {position:absolute;}
</style>
<div id="all">
<div id="divtoposition"><form></form></div>
<div id="formcontainer">
  <form id="form">
    <fieldset id="afterthis"></fieldset>
    <div id="somethingafter"></div>
  </form>
</div>
</div>

Answer 1

我认为有一个复杂的答案，但你能解释一下为什么你想要定位的 div 里面有一个表格吗？它有什么作用？可以用另一种方式完成吗？你不能把一个表格放在一个表格里，这样就出来了。您可以将 DivToPosition 的顶部设置为 100px，然后让 jquery 获取字段集的高度。如果字段集的高度为 150px，您可以让 Js 将 150 添加到 100，现在 DivToPosition 的高度为 250px；

 <script>
$(function(){
var divtopositionTop = 100,
fieldsetHeight = $('#afterthis').height();
   $('#divtoposition').css('top', divtopositionTop+fieldsetHeight+'px');
})
</script>

只是一个可以做到的例子。必须在准备好文档时完成，以便设置高度。但是，这可能会导致位置快速变化，其中元素在应用样式时从一个位置移动到另一个位置。