ワイズリマインダー

height:100%がなんか変

別ウィンドウで見る

1. 一番下まで背景色をつけたい
2. body要素にpaddingを設定したい
3. body内に要素が増えてきてスクロールバーが発生←問題個所

３のようにbody内の要素が増えてきてスクロールバーが発生すると一番下まで延びてくれない。
これはhtml, bodyに設定したheight:100%が原因
ただこの時、bodyにbackground-color:blue;を設定したらちゃんと一番下まで色がついている不思議

仕方がないのでJavaScriptでゴリゴリしてみた。
確認される場合はコチラからどうぞ

ゴリゴリしたコードはこちら

function bodyHeight(){
  // body要素のheightを初期化
  document.body.style.height = 'initial';
  // heightを指定する
  document.body.style.height = document.body.clientHeight + 'px';
};
// 読み込み時
window.addEventListener('load', bodyHeight);
// リサイズ時
window.addEventListener('resize', bodyHeight);

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。