Wie kann ich verhindern, dass sich das Textfeld über sein DIV-Element hinaus erstreckt? (nur Google-Chrome-Problem)

Wie kann ich verhindern, dass das textarea-von stretching über seine übergeordneten DIV-element?

Habe ich diese textarea in eine Tabelle, die sich innerhalb eines DIV-und es scheint, dass es bewirkt, dass die gesamte Tabelle zu Strecken seine Grenzen.

Sehen Sie ein Beispiel für die gleiche situation auch in einem eher einfachen Fall nur darum, einen text-Bereich innerhalb eines div (wie das, was hier verwendet wird, in www.stackoverflow.com)

Sehen Sie die Bilder unten, dass das textarea-Strecken können über die Größe des übergeordneten? Wie kann ich dies verhindern?

Ich bin Art von neuen CSS-also ich weiß wirklich nicht, welche CSS-Attribute sollte ich verwenden. Ich habe versucht, einige, wie displayund überlauf.
Aber Sie don ' T scheinen zu den trick tun.
Alles, was ich verpasst haben könnte?

Wie kann ich verhindern, dass sich das Textfeld über sein DIV-Element hinaus erstreckt? (nur Google-Chrome-Problem)

UPDATE:
HTML -

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
}

Wenn Sie diesen code im inneren der http://jsfiddle.net
Sie werden sehen, dass Sie anders handeln. Obwohl die textarea-Komponente beschränkt sich auf den Anteil erklärte in seinem css-Stil, ist es immer noch möglich, um es zu bekommen, um die Ursache der übergeordneten Tabelle so groß wie Sie sein möchte, und dann kann man sehen, dass es schwappt über seine Eltern-Grenze.
Irgendwelche Gedanken auf, wie man dieses Problem beheben?

InformationsquelleAutor der Frage Itay Levin | 2010-10-10

150

Deaktivieren der Größenanpassung komplett:
```
textarea {
    resize: none;
}
```
Oder Sie können die limit-Größe:
```
textarea {
    max-width: 100px; 
    max-height: 100px;
}
```
Zur Begrenzung der Größe der Eltern kann die Breite und/oder Höhe:
```
textarea {
    max-width: 100%; 
    max-height: 100%;
}
```
InformationsquelleAutor der Antwort Māris Kiseļovs
2

Ich hoffe, Sie sind mit dem gleichen problem, dass ich hatte... mein Problem war einfach: Machen Sie eine Feste textarea mit gesperrt Prozentsätze in den container (ich bin neu in CSS/JS/HTML, so mit mir tragen, wenn ich nicht bekommen, die Sprache korrekt) so, dass, egal das Gerät, es ist die Anzeige auf, die box Befüllen der container (der Zelle) nimmt die richtige Menge an Speicherplatz. Hier ist, wie ich es gelöst:
```
<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>
```
Dann CSS Sieht so aus...
```
#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}
```
Sorry für die schlampige code-block hier, aber ich hatte Ihnen zu zeigen, was wichtig ist und ich weiß nicht, wie einfügen, zitiert CSS-code auf dieser website. In jedem Fall, um sicherzustellen, dass Sie sehen, was ich Rede, die wichtigen CSS ist weniger eingerückt hier...

Was ich dann auch Tat (wie hier gezeigt) ist sehr speziell zwicken die Prozentsätze, bis ich gefunden, diejenigen, die gearbeitet wird perfekt auf Ihre Anzeige, egal welches Gerät Bildschirm verwendet wird.

Zugegeben, ich denke, die "resize: none;" ist übertrieben, aber better safe than sorry, und jetzt die Verbraucher nicht haben, sowieso, um die Größe der box, noch wird es eine Rolle, welches Gerät Sie es anschauen.

Es funktioniert Super.

InformationsquelleAutor der Antwort Steven L
1
```
textarea {
width: 700px;  
height: 100px;
resize: none; }
```
weisen Sie Ihre gewünschte Breite und Höhe für die textarea-Komponente und verwenden dann.
resize: none ; css-Eigenschaft deaktiviert werden, die textarea ist dehnbar Eigenschaft.

InformationsquelleAutor der Antwort Siddhartha Chowdhury

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.