如何在固定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跨越屏幕和其他部分，所以有時它的內容不可見。如何正確定位它只在.col-md-10 div內延伸？

Answer 1

整理出來以獲得一個新的字典條目時使用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寬度我還使用了Javascript支持，但是必須有一些更容易只用CSS。