Verwendung der Inhalt-Box, um Höhe auszugleichen

Question

Als der Standard-Box-Sizing-Modus alles, was es bisher getan hat, ärgert mich. Jetzt, wo ich denke, dass ich einen guten Zweck dafür gefunden habe, kann ich es nicht zum Ausdruck bringen. Prüfen Sie es

#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>

Die Idee ist, dass die textbar 20px vom Boden des Behälters nehmen sollte und der Füllstoff sollte den Rest. Ich denke, da content-box so beschrieben wird, dass sie margin und padding in ihrer Gesamtbreite/-höhe enthält, subtrahiert sie diese 20px, die ich für die Margin von 100% gegeben habe und effektiv 100% -20px ist, aber kein Glück, sie deckt immer noch die gesamten Container und unterlegt die Textleiste.

Warum ist das? Wie könnte ich das sonst noch machen?

PS! Ich möchte calc() nicht aus Kompatibilitätsgründen verwenden.

Answer 1

Da Sie bereits position: absolute; für das Textfeld verwenden, würde ich einfach Folgendes tun.

Wechsel:

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

To:

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

Answer 2

Ich stellte dar, da Inhalt-Box als auch Rand und padding in seiner gesamten Breite/Höhe beschrieben

Nr. Mit box-sizing: content-box, Werte von width und height enthalten nur die content box. Sie enthalten keine Abstände, Ränder oder Ränder.

Um das zu erreichen, was Sie wollen, Sie border-box mit Polsterung statt Marge verwenden können.

#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>

Die modernen Alternativen würden calc(100% - 20px) oder Flexbox sein.