Wie Sie Eine Textarea-Komponente Zu 100% Mit CSS Nur

Ich habe ein textarea-tag mit dem text, ich möchte einen Benutzer zu Bearbeiten. Der textarea-tag ist verpackt in einem div-so:

div.container {
   width: 295px;
   max-height: 250px;
   overflow: auto;
   position: relative;
   border: 1px solid: #EEEEEE;
}
textarea {
   width: 270px;
   height: 100%;
   resize: none;
   overflow: hidden;
   border: none;
}

<div class="container">
   <textarea id="overview">
      blah blah....
   </textarea>
</div>

Div hat eine Feste Breite, max-Höhe und zeigt Bildlaufleisten an, wenn die Höhe zu groß ist. All dies ist gut, aber wie bekomme ich die textarea zu erweitern, um 100%? Es ist derzeit nur zwei Zeilen hoch und nicht zu erweitern, um zeigen alle den text, wenn ich viel text drin. Sehen Sie sich bitte die fiddle zu sehen, was ich spreche.

Was genau ist dein Ziel? Sind Sie auf der Suche nach einer flexiblen text-Bereich, und wollen Sie es, um zu Blättern? Ich denke, ich sehe nicht, warum Sie würde nicht nur den Stil, den Sie wollen, um die textarea selbst.

InformationsquelleAutor Halcyon | 2011-10-24

  1. 4

    Ihre div.container muss eine explizite Höhe angegeben. Kind Inhalt nicht erweitern bis zu einer max-height nur height.

    Etwas wie dieses:
    http://jsfiddle.net/dpF7k/
    oder einfach den Antrag direkt an die textarea-Komponente statt einer Umhüllung div: http://jsfiddle.net/ujKCf/

    Das einzige, was fehlt, ist, dass es nicht unterschritten 250px wenn es weniger Inhalt.

    Habe ich eine max-Höhe, da die Inhalte dynamisch sind. Wenn der Inhalt der textarea erweitern Vergangenheit 250px, ich möchte das div um die Bildlaufleisten, um zu zeigen, das textarea-text.
    Der Punkt ist, dass die max Höhe wäre schön, aber es nicht tun nichts, bis es gefüllt ist. Siehe @Karl Kommentar.
    Vielen Dank für die Einsicht. Nachdem ich diese getestet, ich habe mich für jQuery und erweitern Sie die textarea-Komponente, um die Höhe, die ich brauchte, sobald die Seite fertig geladen ist, die das Problem gelöst.

    InformationsquelleAutor s_hewitt

  2. 1

    In der textarea kann nur erweitert werden, so groß wie div#container

    Während Sie Ihren container max-height: 250px, es wird nicht zu erweitern, um Größe, wenn etwas drückt. Da Ihr textarea ist 100%, es ist nur das verwendet, was verfügbar ist.

    Sehen, was ich meine, nur das set container height: 250px statt max-height.

    Ich könnte die Höhe der textarea auf 3000px und würde es erweitern, um alle den text, aber dann ich am Ende mit winzigen scroll-Balken und eine ganze Reihe von zusätzlichen weißen Bereich unterhalb der textarea-text. Ich bin einfach ratlos, wie ich das erweitern der textarea. Ich kann nicht eine Feste Höhe da die textarea-Inhalt dynamisch ist.
    Andere websites wie Facebook haben sich mit diesem als gut, ich glaube, die einzige Lösung ist, JavaScript zu verwenden, wenn Sie möchten, es zu erweitern, wie Sie erhöhen den Inhalt des textarea. Es gibt zahlreiche code-Beispiele für diese, wie z.B. das jQuery-plugin erwähnt Valoric

    InformationsquelleAutor Karl

  3. 0

    Stattdessen könnte man verwenden JavaScript um dieses Problem zu lösen.

    Dies ist ein jQuery-plugin von James Padolsey. Es sieht aus wie es würde genau das tun, was Sie wollen.

    Edit: ich dachte, der OP wollte nicht, dass eine scroll bar sein überlauf... NVM dann

    auch nun gebrochen

    InformationsquelleAutor Valoric

Schreibe einen Kommentar