Mein Ziel ist es, die Textarea (letztes Feld des Formulars) auf maximale Höhe zu bringen (also bis zum Ende des Wrappers).
Ich habe den Wrapper für die Darstellung meiner Frage jetzt mal auf 500 Pixel skaliert, dieser Wert ist jedoch variabel (ich passe die Höhe mit availableHeight am Anfang meines Programmes an).
Code
<style>
* {
box-sizing: border-box;
margin: 0;
}
.form-row {
display: flex;
}
.wrapper {
height: 500px;
flex-basis: 49%;
border: solid black 3px;
background-color: lightgrey;
padding: 0.5em;
border-radius: 3px;
}
.label-left {
flex: 0 0 7.5em;
}
.label-middle {
padding-left: 1em;
padding-right: 0.2em;
}
.input-max {
flex-grow: 1;
}
textarea{
width:100%;
height:100%;
}
div#personal-detail {
height: 100%;
display:flex;
flex-direction:column;
}
.row1{
height:100%;
}
</style>
<form id="form" autocomplete="off">
<div class="wrapper">
<div id="personal-detail">
<div class="caption">Persönliche Daten</div>
<div class="form-row">
<label class="label-left">Id</label>
<input type="text">
<label class="label-special">Angelegt</label>
<input type="date">
<label class="label-special">Geändert</label>
<input type="date">
</div>
<div class="form-row">
<label class="label-left">Gesperrt</label>
<input type="checkbox">
<label class="label-middle">Grund</label>
<input class="grow-and-shrink" type="text">
</div>
<div class="form-row">
<label class="label-left">Anrede</label>
<select>
<option style="display:none"></option>
<option value = "Herr"> Herr</option>
<option value = "Frau"> Frau</option>
<option value = "Fräulein">Fräulein</option>
</select>
<label class="label-middle">Titel</label>
<select>
<option style="display:none"></option>
<option value = "Dr"> Dr.</option>
<option value = "Professor"> Professor</option>
<option value = "Professorin">Professorin</option>
</select>
</div>
<div class="form-row">
<label class="label-left">Firma</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Familienname</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Vorname</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Straße+Nr.</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Plz</label>
<input type="text">
<label class="label-middle">Ort</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Länderkürzel</label>
<select id="kurz">
</select>
<label class="label-middle">Land</label>
<select class="input-max" id="land">
</select>
</div>
<div class="form-row">
<label class="label-left"></label>
<input type="date">
<label class="label-middle">Steuer-Id.-Nr.</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">MwSt. Nr</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Festnetz</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Handy</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Email</label>
<input class="input-max">
</div>
<div class="form-row">
<label class="label-left">Fax</label>
<input class="input-max" type="text">
</div>
<div class="form-row">
<label class="label-left">Website</label>
<input class="input-max" type="text">
</div>
<div class="form-row row1">
<label class="label-left">Notiz</label>
<textarea></textarea>
</div>
</div>
</div>
</div>
</form>
<script>
/* Javascript ist nur für die länderauswahl und hat nix mit textarea zutun*/
var laender=[["AD" , "Andorra"],
["AE" , "Vereinigte Arabische Emirate"],
["AF" , "Afghanistan"],
["AG" , "Antigua und Barbuda"],
["AI" , "Anguilla"],
["AL" , "Albanien"],
["AM" , "Armenien"],
["AN" , "Niederländische Antillen"],
["AO" , "Angola"],
["AQ" , "Antarktis"],
["AR" , "Argentinien"],
["AS" , "Amerikanisch-Samoa"],
["AT" , "Österreich (Austria)"],
["AU" , "Australien"],
["AW" , "Aruba"],
["AZ" , "Azerbaijan"],
["BA" , "Bosnien-Herzegovina"],
["BB" , "Barbados"],
["BD" , "Bangladesh"],
["BE" , "Belgien"],
["BF" , "Burkina Faso"],
["BG" , "Bulgarien"],
["BH" , "Bahrain"],
["BI" , "Burundi"],
["BJ" , "Benin"],
["BM" , "Bermudas"],
["BN" , "Brunei Darussalam"],
["BO" , "Bolivien"],
["BR" , "Brasilien"],
["BS" , "Bahamas"],
["BT" , "Bhutan"],
["BV" , "Bouvet Island"],
["BW" , "Botswana"],
["BY" , "Weißrußland (Belarus)"],
["BZ" , "Belize"],
["CA" , "Canada"],
["CC" , "Cocos (Keeling) Islands"],
["CD" , "Demokratische Republik Kongo"],
["CF" , "Zentralafrikanische Republik"],
["CG" , "Kongo"],
["CH" , "Schweiz"],
["CI" , "Elfenbeinküste (Cote D'Ivoire)"],
["CK" , "Cook Islands"],
["CL" , "Chile"],
["CM" , "Kamerun"],
["CN" , "China"],
["CO" , "Kolumbien"],
["CR" , "Costa Rica"],
["CS" , "Tschechoslowakei (ehemalige)"],
["CU" , "Kuba"],
["CV" , "Kap Verde"],
["CX" , "Christmas Island"],
["CY" , "Zypern"],
["CZ" , "Tschechische Republik"],
["DE" , "Deutschland"],
["DJ" , "Djibouti"],
["DK" , "Dänemark"],
["DM" , "Dominica"],
["DO" , "Dominikanische Republik"],
["DZ" , "Algerien"],
["EC" , "Ecuador"],
["EE" , "Estland"],
["EG" , "Ägypten"],
["EH" , "Westsahara"],
["ER" , "Eritrea"],
["ES" , "Spanien"],
["ET" , "Äthiopien"],
["FI" , "Finnland"],
["FJ" , "Fiji"],
["FK" , "Falkland-Inseln (Malvinas)"],
["FM" , "Micronesien"],
["FO" , "Faröer-Inseln"],
["FR" , "Frankreich"],
["FX" , "France, Metropolitan"],
["GA" , "Gabon"],
["GD" , "Grenada"],
["GE" , "Georgien"],
["GF" , "Französisch Guiana"],
["GH" , "Ghana"],
["GI" , "Gibraltar"],
["GL" , "Grönland"],
["GM" , "Gambia"],
["GN" , "Guinea"],
["GP" , "Guadeloupe"],
["GQ" , "Äquatorialguinea"],
["GR" , "Griechenland"],
["GS" , "Südgeorgien und Südliche Sandwich-Inseln"],
["GT" , "Guatemala"],
["GU" , "Guam"],
["GW" , "Guinea-Bissau"],
["GY" , "Guyana"],
["HK" , "Kong Hong"],
["HM" , "Heard und Mc Donald Islands"],
["HN" , "Honduras"],
["HT" , "Haiti"],
["HU" , "Ungarn"],
["ID" , "Indonesien"],
["IE" , "Irland"],
["IL" , "Israel"],
["IN" , "Indien"],
["IO" , "British Indian Ocean Territory"],
["IQ" , "Irak"],
["IR" , "Iran (Islamische Republik)"],
["IS" , "Island"],
["IT" , "Italien"],
["JM" , "Jamaica"],
["JO" , "Jordanien"],
["JP" , "Japan"],
["KE" , "Kenya"],
["KG" , "Kirgisien"],
["KH" , "Königreich Kambodscha"],
["KI" , "Kiribati"],
["KM" , "Komoren"],
["KN" , "Saint Kitts und Nevis"],
["KP" , "Korea, Volksrepublik"],
["KR" , "Korea"],
["KW" , "Kuwait"],
["KY" , "Kayman Islands"],
["KZ" , "Kasachstan"],
["LA" , "Laos"],
["LB" , "Libanon"],
["LC" , "Saint Lucia"],
["LI" , "Liechtenstein"],
["LK" , "Sri Lanka"],
["LR" , "Liberia"],
["LS" , "Lesotho"],
["LT" , "Littauen"],
["LU" , "Luxemburg"],
["LV" , "Lettland"],
["LY" , "Libyen"],
["MA" , "Marokko"],
["MC" , "Monaco"],
["MD" , "Moldavien"],
["MG" , "Madagaskar"],
["MH" , "Marshall-Inseln"],
["MK" , "Mazedonien, ehem. Jugoslawische Republik"],
["ML" , "Mali"],
["MM" , "Myanmar"],
["MN" , "Mongolei"],
["MO" , "Macao"],
["MP" , "Nördliche Marianneninseln"],
["MQ" , "Martinique"],
["MR" , "Mauretanien"],
["MS" , "Montserrat"],
["MT" , "Malta"],
["MU" , "Mauritius"],
["MV" , "Malediven"],
["MW" , "Malawi"],
["MX" , "Mexico"],
["MY" , "Malaysien"],
["MZ" , "Mozambique"],
["NA" , "Namibia"],
["NC" , "Neu Kaledonien"],
["NE" , "Niger"],
["NF" , "Norfolk Island"],
["NG" , "Nigeria"],
["NI" , "Nicaragua"],
["NL" , "Niederlande"],
["NO" , "Norwegen"],
["NP" , "Nepal"],
["NR" , "Nauru"],
["NU" , "Niue"],
["NZ" , "Neuseeland"],
["OM" , "Oman"],
["PA" , "Panama"],
["PE" , "Peru"],
["PF" , "Französisch Polynesien"],
["PG" , "Papua Neuguinea"],
["PH" , "Philippinen"],
["PK" , "Pakistan"],
["PL" , "Polen"],
["PM" , "St. Pierre und Miquelon"],
["PN" , "Pitcairn"],
["PR" , "Puerto Rico"],
["PT" , "Portugal"],
["PW" , "Palau"],
["PY" , "Paraguay"],
["QA" , "Katar"],
["RE" , "Reunion"],
["RO" , "Rumänien"],
["RU" , "Russische Föderation"],
["RW" , "Ruanda"],
["SA" , "Saudi Arabien"],
["SB" , "Salomonen"],
["SC" , "Seychellen"],
["SD" , "Sudan"],
["SE" , "Schweden"],
["SG" , "Singapur"],
["SH" , "St. Helena"],
["SI" , "Slovenien"],
["SJ" , "Svalbard und Jan Mayen Islands"],
["SK" , "Slowakei"],
["SL" , "Sierra Leone"],
["SM" , "San Marino"],
["SN" , "Senegal"],
["SO" , "Somalia"],
["SR" , "Surinam"],
["ST" , "Sao Tome und Principe"],
["SV" , "El Salvador"],
["SY" , "Syrien, Arabische Republik"],
["SZ" , "Swaziland"],
["TC" , "Turk und Caicos-Inseln"],
["TD" , "Tschad"],
["TF" , "Französisches Südl.Territorium"],
["TG" , "Togo"],
["TH" , "Thailand"],
["TJ" , "Tadschikistan"],
["TK" , "Tokelau"],
["TM" , "Turkmenistan"],
["TN" , "Tunesien"],
["TO" , "Tonga"],
["TP" , "Ost-Timor"],
["TR" , "Türkei"],
["TT" , "Trinidad und Tobago"],
["TV" , "Tuvalu"],
["TW" , "Taiwan"],
["TZ" , "Tansania, United Republic of"],
["UA" , "Ukraine"],
["UG" , "Uganda"],
["GB" , "Großbritannien"],
["US" , "Vereinigte Staaten"],
["UM" , "Vereinigte Staaten, Minor Outlying Islands"],
["UY" , "Uruguay"],
["UZ" , "Usbekistan"],
["VA" , "Vatikanstaat"],
["VC" , "Saint Vincent und Grenadines"],
["VE" , "Venezuela"],
["VG" , "Virgin Islands (Britisch)"],
["VI" , "Virgin Islands (U.S.)"],
["VN" , "Vietnam"],
["VU" , "Vanuatu"],
["WF" , "Wallis und Futuna Islands"],
["WS" , "Samoa"],
["YE" , "Jemen"],
["YT" , "Mayotte"],
["YU" , "Jugoslawien"],
["ZA" , "Südafrika"],
["ZM" , "Sambia"],
["ZW" , "Zimbabwe"]];
var ku=document.getElementById('kurz');
var la=document.getElementById('land');
for(a=0;a<=laender.length-1;a++){
ele=document.createElement('option');
ele1=document.createElement('option');
ele.value=laender[a][0];
ele.innerHTML=laender[a][0];
ele1.value=laender[a][1];
ele1.innerHTML=laender[a][1];
ku.appendChild(ele);
la.appendChild(ele1);
}
ku.addEventListener('change',function(f){
for(a=0;a<=laender.length-1;a++){
if(laender[a][0]==this.value){
for (k=0; k<la.options.length; k++) {
if (la.options[k].value==laender[a][1]) {
la.options[k].selected = true;
}
}
}
}
})
la.addEventListener('change',function(f){
for(a=0;a<=laender.length-1;a++){
if(laender[a][1]==this.value){
for (k=0; k<ku.options.length; k++) {
if (ku.options[k].value==laender[a][0]) {
ku.options[k].selected = true;
}
}
}
}
})
</script>