width:100%にするとはみ出す
ケース1
問題
ある要素の中に、width: 100% にした要素を入れるときっちり収まらず、はみ出してしまう。
特に input 要素など。
原因
box-sizing がデフォルトでは content-box になっているため。
content-box では、width が content の幅として計算されて、padding, border の幅を含んでいない。
このため、padding, border の分だけはみ出る。
input 要素では、枠が border、枠と中のテキストの間が padding になっている。このため、input 要素ははみ出してしまう。
対策
box-sizing を border-box にする。
code:css
input {
box-sizing: border-box;
width: 100%;
}
古い方法(box-sizing がなかった時代の対策)
padding、border が必要な場合は、その上にpadding, border のサイズが0の要素をかぶせてしまう。このかぶせた要素の方で width:100% として、その中では width: auto として自動サイズ拡張させる。
ケース2
縦スクロールバーが出ている場合、その幅も width の計算に含まれてしまう。