コンテンツボックスを使用して高さをオフセットする

Question

デフォルトのボックスサイズモードは、これまでに行ってきたすべてのことが気になります。だからこそ私はそれをうまく使うことができたと思うので、それを明らかにすることはできません。それ

#container { 
 
    width:200px; 
 
    height:200px; 
 
    position:relative; 
 
} 
 

 
#textbar { 
 
    position:absolute; 
 
    left:0; right:0; bottom:0; 
 
    height:20px; 
 
    background-color:rgba(0,255,0,0.5); 
 
} 
 

 
#filler { 
 
    height:100%; 
 
    margin-bottom:20px; 
 
    box-sizing:content-box; 
 
    background-color:rgba(255,0,0,0.5); 
 
}

<div id="container"> 
 
    <div id="filler"></div> 
 
    <div id="textbar">here is text</div> 
 
</div>

だからアイデアはtextbarは、容器の底部から20ピクセルを取るべきであるとフィラーが休息を取るべきであるということです確認してください。コンテンツボックスは、幅と高さの合計にマージンとパディングを含めると記述されているので、100％からマージンを引いた20pxを差し引いて、効果的に100％〜20pxにします。テキストバーの下に表示されます。

なぜですか？どのように私はこれを行うことができますか？

PS！互換性の理由からcalc（）を使用したくない。

Answer 1

すでにテキストボックスにposition: absolute;が使用されているので、次のようにします。

変更：

#filler { 
    height:100%; 
    margin-bottom:20px; 
    box-sizing:content-box; 
    background-color:rgba(255,0,0,0.5); 
} 

：をコンテンツボックスは、その全体の幅/高さのマージンと パディングを含むものとして記載されているので

#filler { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom:20px; 
    background-color:rgba(255,0,0,0.5); 
} 

Answer 2

私は考え出し

いいえ、box-sizing: content-boxの場合、値はwidthとheightにはcontent boxが含まれています。パディング、ボーダー、マージンは含まれません。

あなたが望むものを達成するために、あなたは、パディングの代わりに、余裕を持ってborder-boxを使用することができます。

#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
#textbar { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 20px; 
 
    background-color: rgba(0, 255, 0, 0.5); 
 
} 
 
#filler { 
 
    height: 100%; 
 
    padding-bottom: 20px; 
 
    box-sizing: border-box; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
}

<div id="container"> 
 
    <div id="filler"></div> 
 
    <div id="textbar">here is text</div> 
 
</div>

近代的な代替案はcalc(100% - 20px)またはフレキシボックスになります。