<textarea> soll sich automatisch der Höhe anpassen

[HansJ]

Ich bin dabei ein Formular zu entwerfen. Dabei bin ich auch ein Problem gestoßen, das mir nicht mehr aus dem Kopf geht.  Wie kann ich das Eingabefeld <textarea> in der Höhe steuern, wenn mir dieses nicht bekannt ist. Ich habe es mit 100% versucht. Das Ziel sollte sein das sich das Feld dem äußeren anpasst.

#content{
width:500px;
height:500px
}
textarea {
width:100%;
height: 100%;
}

HansJ

[Der Martin]

Hallo,

Wie kann ich das Eingabefeld <textarea> in der Höhe steuern, wenn mir dieses nicht bekannt ist. Ich habe es mit 100% versucht. Das Ziel sollte sein das sich das Feld dem äußeren anpasst.

#content{
width:500px;
height:500px
}
textarea {
width:100%;
height: 100%;
}

sollte wie gewünscht wirken - vorausgesetzt, das textarea-Element ist unmittelbares Kindelement von #content. Ist es aber Enkel oder Urenkel (z.B. weil noch ein fieldset dazwischen ist), dann muss für alle Elemente, die in der DOM-Struktur dazwischen liegen, auch eine Höhe festgelegt werden.

Ciao,
 Martin

[HansJ]

<div style=" border: 1px solid #000; display: block; height:400px;">

<textarea style="width:40%;float:left; height:100%;">Text area</textarea>

<div style="width:45%; float:right; height:300px; border: 1px solid #000; ">

</div>

</div>

Hallo Martin,
Nein es funktioniert nicht so wie gewünscht. Also in meinem Beispiel erstreckt sich die textarea jetzt über die Höhe des ersten DIVs, weil ich als Höhe 400px angegeben habe. Wenn ich diesen Wert allerdings lösche, sollte eigentlich der Wert des zweiten Divs die Höhe der textarea steuern. Tut dieser aber nicht.

HansJ

Hallo,

Wie kann ich das Eingabefeld <textarea> in der Höhe steuern, wenn mir dieses nicht bekannt ist. Ich habe es mit 100% versucht. Das Ziel sollte sein das sich das Feld dem äußeren anpasst.

#content{
width:500px;
height:500px
}
textarea {
width:100%;
height: 100%;
}

sollte wie gewünscht wirken - vorausgesetzt, das textarea-Element ist unmittelbares Kindelement von #content. Ist es aber Enkel oder Urenkel (z.B. weil noch ein fieldset dazwischen ist), dann muss für alle Elemente, die in der DOM-Struktur dazwischen liegen, auch eine Höhe festgelegt werden.

Ciao,
Martin

[Der Martin]

Hallo,

<div style=" border: 1px solid #000; display: block; height:400px;">

<textarea style="width:40%;float:left; height:100%;">Text area</textarea>

<div style="width:45%; float:right; height:300px; border: 1px solid #000; ">

</div>

</div>

>   
> Nein es funktioniert nicht so wie gewünscht. Also in meinem Beispiel erstreckt sich die textarea jetzt über die Höhe des ersten DIVs, weil ich als Höhe 400px angegeben habe.  
  
ja, richtig.  
  

> Wenn ich diesen Wert allerdings lösche, sollte eigentlich der Wert des zweiten Divs die Höhe der textarea steuern. Tut dieser aber nicht.  
  
Auch richtig. Das innere div-Element ist gefloatet. Das hast du im ersten Post verschwiegen. Eine Nebenwirkung davon ist, dass es keinen Einfluss mehr auf die Höhe seines Elternelements hat. Für die Bestimmung der Höhe seines Elternelements ist es praktisch "nicht da".  
  
Aber warum floaten? Gib doch beiden Elementen im Container, also sowohl dem textarea- als auch dem inneren div-Element, display:inline-block, dann kannst du sie auch nebeneinander anordnen, weil sie als kompakter Block wie Text fließen. Ob das mit der Höhenanpassung dann auch so elegant geht, kann ich aber nicht mit Sicherheit sagen.  
  

> > Hallo,  
> > [...]  
> > Ciao,  
> >  Martin  
  
Und bitte keine Fullquotes. Danke.  
  
So long,  
 Martin  

-- 
Vater Staat bringt uns noch alle unter Mutter Erde.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[HansJ]

Ok, das mit dem inline-block ist perfekt, wenn ich es richtig verstanden habe, meinst du das so. Aber leider hat es keienrlei Auswirkung auf die Höhe des textarea Feld

  
  
<div style=" border: 1px solid #000; ">  
  
<textarea style="display:inline-block; width:49%;height:100%;">Text area</textarea>  
  
<div style="display:inline-block; width:49%;  border: 1px solid #000; ">  
Hallo<br/>  
das<br/>  
ist<br/>  
ein<br/>  
Test  
</div>  
  
</div>  

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Ob das mit der Höhenanpassung dann auch so elegant geht, kann ich aber nicht mit Sicherheit sagen.

Elegant: Flexbox.

Qapla'

[Thomas]

Hallo Gunnar,

Elegant: Flexbox.

geht leider nur nicht in allen Browsern, was ich doch sehr schade finde.

[M.]

Mahlzeit,

geht leider nur nicht in allen Browsern, was ich doch sehr schade finde.

Stimmt, Opera-Mini hat wohl noch Probleme damit. Und bei der Verbreitung natürlich massiv relevant ... ;)

[Thomas]

Guten Morgen,

Stimmt, Opera-Mini hat wohl noch Probleme damit. Und bei der Verbreitung natürlich massiv relevant ... ;)

den IE 8 aber mindestens den IE 9 sollte man nicht ganz aus den Augen verlieren.

[M.]

Mahlzeit,

den IE 8 aber mindestens den IE 9 sollte man nicht ganz aus den Augen verlieren.

Dann hast du ein paar Browser, die die Boxen untereinander anzeigen. Wayne?
Auch gibts ja noch CCs, wo du dann ein float einbasteln kannst. Der Vorteil, wenn die paar Hanseln vom IE8 und 9 weg sind, schmeisst du einfach den CC wieder raus.

[Gunnar Bittersmann]

@@M.:

nuqneH

Auch gibts ja noch CCs

In CSS gibt’s sowas nicht. Und Hacks für IE8 und 9 sind so eher „geht so“.

Besser Browsererkennung per JavaScript: document.documentMode oder UA-String (Modernizr).

Oder Generierung von Legacy-IE-Stylesheets aus derselben Quelle wie das Standard-Stylesheet per CSS-Präprozessor.

Qapla'

[Gunnar Bittersmann]

@@Thomas:

nuqneH

Elegant: Flexbox.

geht leider nur nicht in allen Browsern

Ja, und? Do websites need to look exactly the same in every browser?

Qapla'