0

我有一个 CSS 页脚，主 div 是#footer.

然后我在css中#small-footer有另一个div 。display:none;

我有另一个名为的样式表responsive.css，其中包含我的媒体查询。

在responsive.css我有以下内容：

@media screen and (max-width: 1024px) {
    #footer {
        display:none;
    }
    #footer-inner {
        display:none;
    }
    #footer-top {
        display:none;
    }
    #footer-left {
        display:none;
    }
    #footer-middle {
        display:none;
    }
    #footer-right {
        display:none;
    }
    #footer-bottom {
        display:none;
    }
    #small-footer {
        display:block;
    }
}

因此，当屏幕尺寸变小时，它会隐藏所有页脚代码，但由于某种原因，#small-footer div 没有出现。

任何想法这可能是什么？

我在这里创建了一个小提琴：http: //jsfiddle.net/Er7vy/

4

3 回答 3

2

您已将您的内容放在您的#small-footer内部#footer，因为页脚不显示任何内容，其中的所有内容都将被隐藏（包括您的小页脚）

http://jsfiddle.net/Er7vy/1/

于 2013-05-17T13:15:39.420 回答
0

你有

footer-inner {
    display:none;
}

这意味着该 div 中的任何内容都不会出现，并且 #small-footer div 位于该 div 中。

于 2013-05-17T13:16:35.950 回答
0

尝试使用 min-width显示您的大页脚，并隐藏小页脚。这使得所有屏幕尺寸的小页脚都可见，直到您到达较大的断点。并#small-footer搬出#footer-inner。这种方式#footer总是可见的。

#small-footer { display:block }
#footer-inner { display:none; }

@media screen and (min-width: 1024px) {
    #footer-inner { display:block; }
    #small-footer { display:none; }
}

<div id="footer">
    <div id="footer-inner">...</div>
    <div id="small-footer">...</div>
</div>

这种方法还可以为您节省您当前正在使用的所有冗余display:nones。更少的代码是最好的代码：-\

于 2013-05-17T13:17:01.990 回答