【メモ】cssでコンテンツの表示を%（パーセント）で指定する時の色々

■コンテンツを縦幅横幅100%で表示したい

「横幅や縦幅をブラウザの画面にフィットさせて表示させたい」と言う事が時々あると思います。
その時基本的にはcssで以下の通りに指定しますね

contents {
    width: 100%;
    height: 100%;
}

でもこれだけでは横は100%に引き伸ばされますが、縦は100%に引き伸ばされません。




















では何をしたら良いかと言うと、html要素とbody要素にも同じようにheightの指定をしてやります。
それが以下の状態ですが、この100%で引き伸ばす要素がiframeやtextareaの場合、使用しているブラウザがGoogle Chromeだとそれだけでは不十分です。


上の画像はGoogle Chromeでiframeの縦幅を100%にした場合の画像ですが、不必要に縦のスクロールバーが表示されてしまう現象が起こるのです。
ページ内の全ての要素が表示されているのにもかかわらず、右側にスクロールバーが出てきてしまっているのが分かるかと思います。

これに対してはiframeにvertical-align: topやvertical-align: bottom、display: blockを指定してやるとスクロールバーは出ないようです。





これはiframeやtextareaはインライン要素であり、Google Chromeでのインライン要素のvertical-alignの初期値がbaselineだから起こる問題のようです。
インライン要素は親要素のベースラインに合わせて配置されますが、大体のブラウザのベースラインの位置は行の下端より上なのではみ出してしまい、スクロールバーが表示されてしまうとのこと。
この問題についてはこのページを参考にしました。更に詳しい内容はリンク先を参照ください。









さらにこの%で縦を指定しているページの上部に、pxで指定した要素を表示して、メニューなどを追加したいとします。
その時はcalc計算式を使って以下の通り可変的な要素を実現します。

menu {
    width: 100%;
    height: 20px;
}
contents {
    width: 100%;
    height: calc(100% - 20px);
}

これで以下のように表示されます

これは便利！こんなのがあったんですねぇ。
これはCSS3から実装された要素とのこと。これは色々と捗りますね。


ということで、%で要素の幅を指定する人には色々と役立つ内容でした。