Box-Sizing + Kind-Objekt - HTML, CSS3, Eltern-Kind, CSS

Das hat mich heute sehr geärgert. Was ich tun möchte, kontrolliert die Größe eines untergeordneten Objekts mit 100% des übergeordneten Objekts minus einem Rand, beispielsweise 10 px, unter Verwendung der Box-Sizing-Methode.

Ich weiß, dass es möglich ist, die Box-Sizing-Funktion mit dem übergeordneten Element und der 10 px-Auffüllung zu verwenden und dann das untergeordnete Element auf 100% festzulegen. Ich möchte jedoch wissen, ob es umgekehrt möglich ist.

Hier ist was ich habe .... im Moment passiert alles, dass sich die untergeordnete Box zu 100% an das übergeordnete Objekt anpasst, der Rand ist nicht sichtbar.

<div id="Parent">
<div id="Child">
</div>
</div>

Und...

#Parent
{
height:500px;
width:500px;
background-color:red;
}

#Child
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
margin-left:10px;
width:100%;
height:100%;
background-color:green;
}

Antworten:

Dies ist vorerst der einzig sichere Weg. Als Alternative können Sie css3-Werteausdrücke wie calc () verwenden, die jedoch nicht von allen Browsern unterstützt werden.

http://caniuse.com/#search=calc

Beispiele finden Sie auf der Seite "CSS3-Werte" von w3c http://www.w3.org/TR/css3-values/#calc0