Bootstrap3で、公式サイトに掲載されている、問題を起こしやすい固定ナビのデフォルトCSS

固定ナビデフォルトCSS

bodyタグに対してpadding設定しているため、subheadクラスを囲ったdivに背景色を適用しても、隙間が生じてしまう

body {

  min-height: 2000px;

  padding-top: 70px;

}

---

対策1

bodyタグ自体に背景色を設定して、subheadクラス以外の全ての背景色を白色設定

body{

	background-color:black;

}



div#main,section#accessranking,footer

{

	background-color:white;

}



.subhead,.subhead a{

	color:white;

}

---

問題発生1

重いページで画面がチラつく
・「html表示」処理は、bodyタグを読み込んだ後、各タグを読み込んでいく
・bodyタグと各タグが同じ背景色なら全く気にならないが、異なる場合には影響が生じる場合もある
・今回のケースでは、一度、背景色を黒で読み込んだ後、subheadクラス以外の全ての背景色を白色で描画し直す処理が発生
・結果として、重いページでチラツキが目立つ