2016-04-08 17 views
1

Ich habe einen Textbereich, der den größten Teil meines Bildschirms ausfüllt. Und ich möchte, dass die Größe des Browsers bei einer Größenanpassung des Browsers korrekt geändert wird. Also habe ich die folgende CSS:Wie ändere ich eine Textfläche richtig, wenn ich die Größe des Browserfensters ändere?

html, body { 
    height: 95%; 
    width: 98%; 
    margin: 10px; 
} 

textarea { 
    width: 95%; 
    height: 95%; 
    margin: auto; 
    resize: none; 
} 

aber wenn ich das Browserfenster die richtige Größe funktioniert ok Größe ändern, aber unterer Teil des TextArea- wird mein 95% -Regel nicht gehorchen. Es schrumpft, bis der Boden den Fensterboden passiert.

Nachforschungen anstellen kam ich mit einer anderen Lösung:

textarea { 
    position: fixed; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    width: 95%; 
    resize: none; 
} 

jetzt der Boden verhält sich in Ordnung, aber die richtige Größe hat das gleiche Problem wie unten in der vorherige Lösung hatte.

Wie kann ich die Größe des Textfelds im Browserfenster ändern?

Bitte beachten Sie, dass ich nicht daran interessiert bin, Textarea-Element manuell zu ändern (beachten Sie die resize: none Regel). Ich möchte, dass die Größe geändert wird, wenn die Größe des Browserfensters geändert wird. Eine andere Sache ist, dass mir die Größe des Textes in Textarea egal ist. Ich sollte die Größe unabhängig vom Text ändern.

Ich habe ein Beispiel in diesem jsfiddle erstellt:

https://jsfiddle.net/1akykrg2/13/

Jede Hilfe sehr geschätzt.

Dank
+0

können Sie nicht nur Bootstrap verwenden? – NoReceipt4Panda

+0

Ich benutze Bootstrap ... aber nicht das Layout-Ding eingerichtet ... werde es versuchen –

Antwort

1

Updated jsFiddle

*{ 
 
    box-sizing:border-box;   /* easier box-model calculations */ 
 
    -webkit-box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    margin:0; 
 
} 
 

 
textarea { 
 
    position: fixed; 
 
    left:10px; top:10px; 
 
    width: calc(100vw - 20px);  /* calc and viewport to the rescue */ 
 
    height: calc(100vh - 20px); 
 
    resize: none; 
 
}
<textarea></textarea>

+1

Ich sehe nicht das Textfeld die Höhe des Fensters in der automatisch aktualisierten Version von FireFox –

+0

@ jackblank1 aufnehmen ** bearbeitet **. (Wirklich gab es ein Problem in FF) –

+1

Perfekt. Es hat gut funktioniert. Vielen Dank. –

Verwandte Themen