Css 带有类似书签条的文本div

我写这篇文章是为了更好地解释，那么，如何让红色条填满

.frame

的整个高度呢？也许有什么完全不同的更好的方法来制作这样的东西？

定位元素不再是布局的一部分，所以他们不知道父元素的尺寸是什么。您需要使用JavaScript来实现这一点。

我自己解决

---

轮换让事情变得更加困难，但也许这种相同高度的方法会有所帮助：@SebastianG wow，很酷的文章和很好的博客：）我会考虑如何将其应用于我的问题。。。

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