html - 当浏览器窗口宽度减小时，页脚无法正确显示

Question

可能更容易链接到显示正在发生的事情的图像。

http://imgur.com/a/EaCsO

第一张图片显示了页脚的正常外观，然后第二张图片显示了我在减小窗口宽度时遇到的问题。

当我让我的窗口宽度变小时，页脚和页眉都消失了，相对于我让窗口变小了多少。当水平滚动条出现时，分散开始。

这是我的页脚元素的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;
}