ブラウザウィンドウのサイズを変更すると、テキストエリアのサイズを適切に変更するにはどうすればよいですか？

Question

私は画面の大半を占めるテキストエリアをどうしたらいいですか？ブラウザウィンドウのサイズが変更されたときに、ブラウザのサイズを適切に変更します。だから私は、次のCSS製：

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

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

をしかし、私は、ブラウザのウィンドウのサイズを変更すると、右のサイズは、[OK]を動作しますが、テキストエリアの下の部分は私の95％ルールに従わないであろう。底が窓の底を通過するまで収縮します。私は別の解決策を考え出した研究する

：

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

は今、一番下は大丈夫に動作しますが、右のサイズは、底が前の溶液中で持っていたのと同じ問題を抱えています。

ブラウザウィンドウのサイズ変更でテキストボックスのサイズを適切に変更するにはどうすればよいですか？

私は手動でテキストエリアの要素のサイズを変更することには興味がないことに注意してください（resize: noneルールに注意してください）。ブラウザウィンドウのサイズが変更されたときにサイズを変更したい。 もう1つは、テキストエリア内のテキストのサイズについて気にしないことです。私はテキストから独立してサイズを変更する必要があります。

私はこのjsfiddleで例を作成しました：

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

すべてのヘルプは高く評価しました。おかげ

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>