CSS おれおれ Advent Calendar 2012 – 23日目 メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか? JavaScript使っちゃいます? それCSSで出来るよ! ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。 概要 ネタバレ。 height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。 高さを100%に出来る場合、出来ない場合について知る 昔書いたのでちらと読んでみてください。 CSSでheight:100%を使う方法について。 一言で言うと、上位要素に高さの
![CSSだけでウィンドウぴったりに表示する編集画面を作る。(CSS おれおれ Advent Calendar 2012 – 23日目) | Ginpen.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4af7f62b39439905833504e59ba1e153be6d8b/height=288;version=1;width=512/https%3A%2F%2Fginpen.com%2Fwp-content%2Fthemes%2Fginpen-theme%2Fimg%2Ficon-512.png)