Как сделать div, который находится под фиксированным div, переместить себя, когда изменяется фиксированная высота div?

Question

У меня есть следующая страница в моем приложении рельсы

.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 распространяется по экрану и за его пределами, поэтому иногда содержимое в нем не отображается. Как правильно позиционировать это только в div .col-md-10?

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.