Html 如何制作div，即'；s在固定div下，当固定div'；谁的身高变了？

我的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中的延伸？

在获取新词典条目或调整窗口大小时，使用javascript更改文本部分边距顶部，从而将其分类：

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