footer下の謎の隙間、リサイズして横スクロールした時の右側の謎の隙間

一番したまでスクロールした時にフッター下に謎の隙間が出来る問題。

子要素のmargin-bottomが関係していると思う。
フッター下に子要素のmargin-bottom領域がはみ出している。

ブラウザを小さくリサイズして、横スクロールバーが出た状態で右側エンドまでスクロールさせると、コンテンツの右側に謎の隙間が出来る問題。

子要素の横margin、横paddingが関係していると思う。
親要素1000pxとしている場合に、子要素の横幅が、横margin、横paddingを合わせると1050pxになった場合、前出の状態にスクロールさせるとコンテンツの右側に謎の隙間が50px分できる。

また別のケース;
bodyに背景画像、背景色を設定してwidth:100%にして、子要素にwidth:1100pxを設定した場合。
ブラウザを1100px以下にリサイズして横スクロールバーが出た状態で右側エンドまでスクロールさせると、コンテンツの右側の背景画像に謎の隙間が出来る。
これはブラウザを1100px以下(仮に1000pxとする)にリサイズした時点でbodyはブラウザ幅100%、つまり1000pxになる。しかし子要素はwidth:1100pxあるので、右側エンドまでスクロールさせると、子要素width:1100pxに対してbodyは1000pxしかない。
よって右側に背景画像がない領域が100px出来てしまう。

コメント