当固定div的高度发生变化时，如何制作一个固定div下的div，重新定位？

Question

我的rails应用程序中有以下页面

.col-md-10
  .row
    #dict
      #character
        %strong Character:
      #pronunciation
        %strong Pinyin:
      #meaning
        %strong Meaning:
  .row
    #text-part
  ...

我希望#dict固定在网站的顶部，所以我添加了以下css：

#dict {
  position: fixed;
  width: 100%;
  z-index: 9999;
}

修复了屏幕上的div

但是，固定div中的内容是动态的（根据用户点击的单词进行更改）。当选择具有较长定义的单词时，固定div覆盖其下的div， 如何根据固定的div进行底部div重新定位？此外，固定div跨越屏幕和更远，因此有时其中的内容不可见。如何正确定位它只是在.col-md-10 div中延伸？

Answer 1

在获取新词典条目或调整窗口大小时，使用javascript对＃text-part margin-top进行排序：

DivResizer=
  reposition_text_entry: ->
    current_dictionary_height = $("#dict").css('height')
    $("#text-part").css('margin-top', current_dictionary_height)


  adjust_dict_width: ->
    text_part_width = $("#text-part").css('width')
    $("#dict").css("width", text_part_width)

ready = ->
  $( window ).resize ->
    DivResizer.reposition_text_entry()
    DivResizer.adjust_dict_width()

使用#dict width我也使用了Javascript，但只有CSS才能有一些更简单的方法。