html - ブラウザのウィンドウ幅を小さくすると、フッターが正しく表示されない

Question

何が起こっているかを示す画像にリンクするだけでおそらく簡単です。

http://imgur.com/a/EaCsO

最初の画像はフッターが通常どのように見えるかを示し、2番目の画像はウィンドウ幅を縮小したときに発生する問題を示しています。

ウィンドウの幅を小さくすると、ウィンドウをどれだけ小さくしたかに比べて、フッターとヘッダーの両方が消えます。水平スクロールバーが表示されると、消滅が始まります。

これがフッター要素のCSSです。

.bottombar {
 height:220px;
 clear: both;   
 width:100%;
 background:-webkit-radial-gradient(black 15%,transparent 16%) 0 0,-webkit-radial-gradient(black    15%,transparent 16%) 8px 8px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background:-moz-radial-gradient(black 15%,transparent 16%) 0 0,-moz-radial-gradient(black 15%,transparent 16%) 8px 8px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background:radial-gradient(black 15%,transparent 16%) 0 0,radial-gradient(black 15%,transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
 background-color:#282828;
 background-size:16px 16px;
}

Answer 1

フッターを定義min-widthします。

例えば：

.bottombar{
 min-width:1000px;
}