2018年7月4日水曜日

height:100%のtextareaとiframeでスクロールバーが出ないようにする方法


height:100%のtextareaとiframeでブラウザによってはスクロールバーが出ることがあります。その対策として親要素にoverflow:hiddenを追加するという記事が多く書かれています。

これまであまり気にせず、overflow:hiddenで処理してきたのですが、参考に記載したサイトの記事を読んで納得しました。

HTML5では inline 要素 (inline-block) の vertical-align は baseline となりますが、baseline の位置が決まっていないそうです。そのため、baseline が bottomではないブラウザの場合、textarea や iframe などの inline 要素を height:100% とするとスクロールバーが出てしまうそうです。

vertical-align を bottom にすればスクロールバーは表示されなくなります。



borderやpaddingも含めてheight:100%にするには、box-sizing:border-boxを指定します。
* {
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
           -ms-box-sizing: border-box;
                  box-sizing: border-box;
}

(CSS3に対応した少し古めのブラウザでも正しく表示されるようにベンダープレフィックス付きも指定する)


参考
Chromeのheight:100%がおかしい
http://var.blog.jp/archives/28299286.html

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
http://phiary.me/css3-box-sizing/

【CSS】box-sizing:border-boxの使い方|効かない時は?
https://saruwakakun.com/html-css/reference/box-sizing