htmlで要素のサイズが大きくなっても背景を最大で適用する方法(css)

プログラミング css

html、bodyをheight:100%等にしており、
overflowのスクロールに設定しない限り、はみ出た要素は切れます。

基本的にスクロールさせたくない場合にこういった設定をすると思いますが、
要素内でスクロールをさせたい場合があります。

こういう場合、htmlやbody等にbackgroundで色指定していると
スクロールした要素は色適用されません。
その場合、下記のように指定しましょう。

htmlや、body、もしくは、それらを継承している(inherit)親要素に対して

  min-height: 100%;
  height:auto;

こちらを追加しましょう。
最小サイズを100%にした上で、heightを自動にします。

あんまり必要なさそうです・・・

要素が動的に増える等場合は、
jsで記述が必要ですね。

要素が増えるのをトリガーにして〜等。。

コメント

タイトルとURLをコピーしました