我的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中延伸?
答案 0 :(得分:0)
在获取新词典条目或调整窗口大小时,使用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才能有一些更简单的方法。