Wie erstelle ich eine Elementbreite: 100% minus Polsterung?

Ich habe eine HTML-Eingabe.

padding: 5px 10px;Ich möchte, dass die Eingabe 100% der Breite des übergeordneten Divs beträgt (was fließend ist).

Verwendung jedoch width: 100%;Ursachen die Eingabe zu sein , 100% + 20pxwie ich das umgehen kann?

Beispiel

box-sizing: border-box ist eine schnelle und einfache Möglichkeit, das Problem zu beheben:

Dies 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 Versionen mit Browserpräfix ( -webkit-box-sizingusw.) werden in modernen Browsern nicht benötigt.

Deshalb haben wir box-sizingin 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/ Alles, was ich hinzugefügt habe, war Folgendes :

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

Leider unterstützen ältere Browser wie IE7 dies nicht. Wenn Sie nach einer Lösung suchen, die in alten IEs funktioniert, lesen Sie die anderen Antworten.

Verwenden Sie die Polsterung auch in Prozent und entfernen Sie sie aus der Breite:

Polsterung: 5%;
Breite: 90%;

Sie können es ohne Verwendung box-sizingund nicht klare Lösungen wie tun width~=99%.

Demo auf jsFiddle :

• Behalten Sie die Eingaben paddingundborder
• Addiere zum Eingang negative horizontale margin= border-width+horizontal padding
• Zum horizontalen Wrapper der Eingabe hinzufügen padding, der margindem vorherigen Schritt entspricht

HTML-Markup:

<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 */ 
}

Verwenden Sie css calc ()

Super einfach und super.

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

Wie hier zu sehen: Div Breite 100% minus feste Pixelanzahl
Von webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Originalquelle: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

Habe das hier einfach kopiert, weil ich es im anderen Thread fast verpasst habe.

Angenommen, ich bin in einem Container mit 15px Polsterung, dann verwende ich das immer für den inneren Teil:

width:auto;
right:15px;
left:15px;

Dadurch wird der Innenteil auf die Breite gedehnt, die auf beiden Seiten weniger als 15 Pixel betragen sollte.

Sie können einige Positionierungstricks ausprobieren. Sie können die Eingabe in ein div mit position: relativeund einer festen Höhe setzen, dann auf die Eingabe haben position: absolute; left: 0; right: 0;und jede Auffüllung, die Sie mögen.

Live Beispiel

Hier ist die Empfehlung von codeontrack.com , die gute Lösungsbeispiele enthält:

Anstatt die Breite des div auf 100% zu setzen, stellen Sie es auf auto ein und stellen Sie sicher, dass das <div>auf display: block eingestellt ist (Standard für <div>).

Verschieben Sie die Auffüllung des Eingabefelds in ein Wrapper-Element.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Siehe Beispiel hier: http://jsfiddle.net/L7wYD/1/

Verstehe einfach den Unterschied zwischen Breite: auto; und Breite: 100%; Breite: auto; berechnet (AUTO) MATICALLY die Breite, um die genaue Angabe des Wickelbereichs einschließlich der Polsterung zu treffen. Breite 100% erweitert die Breite und fügt die Polsterung hinzu.

Was ist mit dem Einwickeln in einen Behälter? Behälter sollten Stil haben wie:

{
    width:100%;
    border: 10px solid transparent;
}

Versuche dies:

width: 100%;
box-sizing: border-box;

Für mich war margin:15px;padding:10px 0 15px 23px;width:100%das Ergebnis:

Die Lösung für mich war, width:autostatt zu verwenden width:100%. Mein neuer Code war:

margin:15px;padding:10px 0 15px 23px;width:auto. Dann ist das Element richtig ausgerichtet:

Ich hatte das gleiche Problem. Repariere es so:

width: 100%;
box-sizing: border-box;

Du kannst das:

width: auto;
padding: 20px;