带有书签式栏的文本div

Question

我写了jsfiddle example以获得更好的解释，那么，如何让红条填满.frame的整个高度？可能有任何绝对不同的更好的方法来制作这样的东西吗？

Answer 1

定位元素不再是布局的一部分，因此他们不知道父元素的维度是什么。您需要使用JavaScript来执行此操作。

Answer 2

我自己解决了。 JSfiddle demo

var move_bookmark = function(){
    var sh = parseInt($(this).css('height').replace('px',''));
    var ph = parseInt($(this).parent().css('height').replace('px',''));
    if (sh%2==0)//this is for solving [this problem] - 
//http://math.stackexchange.com/questions/183018/pixel-rectangle-precise-rotating
    {
        if(ph%2!=0)
        {
            ph++;
            $(this).parent().css('height',ph+'px');
        }
    }
    else
    {
        if(ph%2==0)
        {
            ph++;
            $(this).parent().css('height',ph+'px');
        }
    }
    $(this).css('width',ph+'px');
    var sw = ph;
    var offset = parseInt(ph-sw/2-sh/2)+'px'
    console.log(sw+"/"+sh);
    $(this).css('top',offset);
    $(this).css('left',-sw/2+sh/2+'px');
    $(this).parent().css('padding','0px 0px 0px '+sh+'px');
}
$('.bookmark').each(move_bookmark);