Textarea Breite Ausgabe in div

Ich möchte nur ein textarea in eine div setzen, ich denke, es ist kein Problem sein sollte:Textarea Breite Ausgabe in div

CODE

.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
</div>

Dies ist ein sehr schwieriger Code, nicht wahr? Wir alle taten es tausendmal.

Aus irgendeinem Grund ist diese Breite des textarea auf der rechten Seite fehlerhaft. Überprüfen Sie das Box-Modell von .panel scheint gut.

Versucht es in FF, Chrome, Edge, das gleiche Ergebnis überall.

Kann mir jemand erklären, warum ist es, und was ist die Lösung dafür?

Ich habe eine jsFiddle nur zum Spaß gemacht.

Quelle

2016-06-09 vaso123

Was ist das Problem? Liegt es daran, dass beim Überlappen des Textbereichs der Container überlappt? Wenn ja, fügen Sie einfach 'overflow: hidden;' zu Panel hinzu. –

Ich will nichts. Ich möchte nur die rechte Seite des Textfelds reparieren. Wie Sie sehen, gibt es auf der rechten Seite nicht das 10px-Padding von div. – vaso123

fügen Sie 'box-sizing: border-box;' zu Ihrem Textbereich hinzu. –

Erteilen des <textarea> eine box-sizing: border-box sollte es beheben .:

.panel { 
    width: 250px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    padding: 10px; 
} 

.panel textarea { 
    display: block; 
    box-sizing: border-box; 
    width: 100%; 
}

JSFiddle

ich auch eine display:block zu dem Text fügte etwas Unstimmigkeit in unteren Rand für Textfelder zu beseitigen (How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?)

Quelle

2016-06-09 13:55:34 Pandy

'display: block' macht nichts dort – dippas

Ich setze es auf' display: block; ', um zusätzliche Abstände zu beseitigen, die Firefox und Chrome am Ende von Textareas hinzufügen - obwohl du richtig bist, dass es in Bezug auf die Problem mit der richtigen Füllung Ich werde meine Antwort aktualisieren. Referenz für Textarea Padding Inkonsistenz: http://stackoverflow.com/questions/3453959/how-do-i-fix-inconsistent-textarea-bottom-margin-in-firefox-and-chrome – Pandy

Sie sollten box-sizing:border-box universell anstelle von nur div

anwenden

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea, 
 
.panel input { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
    <input type="text" /> 
 
</div>

Quelle

2016-06-09 13:59:16 dippas

Ja, schön - in der Regel von thumb Im Allgemeinen mache ich am Anfang meiner CSS-Dateien für alle Elemente eine allgemeine Box-Sizing-Regel. Nur selten stelle ich bei bestimmten Elementen die Browser-Standardeinstellungen für die Eigenschaft "Box-Sizing" wieder her. –

Statt dessen versuchen Polsterung von 0 bis Ihr TextArea- das Hinzufügen, als Box-Sizing: Ergebnis border-Box unterscheidet sich in einigen Browsern.

Quelle

2016-06-09 14:02:58 frnt

Dies geschieht, weil Textareas standardmäßig Padding und einen Rahmen haben. Wenn Sie die Breite auf 100% setzen, wird die Textfläche tatsächlich zu 100% + Füllung-links/rechts + Grenze-links/rechts-Breite. Wenn Sie das Textfeld auf Box-Sizing setzen: Mit der border-box wird das Padding/Border innerhalb der angegebenen Breite und nicht außerhalb des Rahmens platziert.

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

Hier ist ein visuelles Beispiel: https://css-tricks.com/examples/BoxSizing/

Quelle

2016-06-09 14:11:07 JeffreyPia

Textarea Breite Ausgabe in div

Antwort

Verwandte Themen