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

时间:2012-04-13 04:04:50

标签: html css footer

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

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;
}

1 个答案:

答案 0 :(得分:1)

定义{strong 1>页脚的min-width

例如:

.bottombar{
 min-width:1000px;
}