css - 带有类似书签栏的文本 div

Question

为了更好地解释，我写了jsfiddle 示例，那么，如何使红色条充满整个高度.frame？并且可能有任何完全不同的更好的方法来制作这样的东西吗？

Answer 1

定位元素不再是布局的一部分，因此它们不知道父元素的尺寸是多少。您需要使用 JavaScript 来执行此操作。

Answer 2

我自己解决。JSfiddle 演示。

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);