Tarayıcı penceresini yeniden boyutlandırdığımda yeniden boyutlandırmayı nasıl yeniden boyutlandırabilirim?

Question

Ekranımın çoğunu dolduran bir textarea'ya sahip olmak istiyorum. Tarayıcı penceresi yeniden boyutlandırıldığında düzgün şekilde yeniden boyutlandırılmasını istiyorum. Bu yüzden aşağıdaki css yaptı:

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

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

ama tarayıcı penceresini yeniden boyutlandırmak zaman doğru boyut Tamam çalışır, ancak textarea alt kısmı benim% 95 kuralını itaat olmaz. Alt pencere altını geçene kadar küçülür.

başka çözüm geldi araştırma:

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

şimdi alt ok davranır, ancak alt önceki çözümde olduğu gibi doğru boyut aynı sorun var.

Tarayıcı penceresini yeniden boyutlandırmada metin kutusunu yeniden boyutlandırmayı nasıl yapabilirim?

Lütfen, textarea öğesinin el ile yeniden boyutlandırılmasıyla ilgilenmediğimi unutmayın (resize: none kuralına dikkat edin). Tarayıcı penceresi yeniden boyutlandırıldığında yeniden boyutlandırılmasını istiyorum. Başka bir şey, textarea içindeki metnin büyüklüğünü umursamıyorum. Metinden bağımsız olarak yeniden boyutlandırmalıyım.

Bu jsfiddle bir örnek oluşturduk:

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

Herhangi bir yardım takdir. Teşekkür

Answer 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>