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