Wie macht man ein Element Breite: 100% minus Padding?

Question

Ich habe eine html-Eingabe.

Die Eingabe hat padding: 5px 10px; Ich möchte, dass es 100 % der übergeordneten div's Breite (die Flüssigkeit ist) sein.

Die Verwendung von width: 100%; bewirkt, dass die Eingabe 100% + 20px Wie kann ich das umgehen?

Beispiel

Answer 1

box-sizing: border-box ist ein schneller und einfacher Weg, das Problem zu lösen:

Diese funktioniert in allen modernen Browsern und IE8+.

Hier ist eine Demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Die im Browser vorangestellten Versionen ( -webkit-box-sizing usw.) werden in modernen Browsern nicht benötigt.

Answer 2

Aus diesem Grund haben wir box-sizing in CSS.

Ich habe Ihr Beispiel bearbeitet, und jetzt funktioniert es in Safari, Chrome, Firefox und Opera. Probieren Sie es aus: http://jsfiddle.net/mathias/Bupr3/ Ich habe nur dies hinzugefügt:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Leider wird dies von älteren Browsern wie IE7 nicht unterstützt. Wenn Sie nach einer Lösung suchen, die in alten IEs funktioniert, sehen Sie sich die anderen Antworten an.

Answer 3

Verwenden Sie auch die prozentuale Auffüllung und ziehen Sie sie von der Breite ab:

padding: 5%;
width: 90%;

Answer 4

Css calc() verwenden

Super einfach und genial.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}

Wie hier zu sehen: Div-Breite 100% minus feste Anzahl von Pixeln
von webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Ursprüngliche Quelle: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Ich habe das gerade hierher kopiert, weil ich es in dem anderen Thread fast übersehen hätte.

Answer 5

Sie können dies tun, ohne box-sizing y unklar Lösungen wie width~=99% .

Demo auf jsFiddle :

• Behalten Sie die Eingaben padding y border
• Negative Horizontale zur Eingabe hinzufügen margin = border-width + horizontal padding
• Zum Wrapper der Eingabe hinzufügen horizontal padding gleich margin aus dem vorherigen Schritt

HTML-Auszeichnung:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}