Question

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

然后我又有一个名为#small-footer的div，其中css中有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/

Answer 1

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

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

Answer 2

你有

footer-inner {
    display:none;
}

这意味着该div中的任何内容都不会出现，＃small-footer div就在该div中。

Answer 3

尝试使用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:none。更少的代码是最好的代码： - \

CSS响应页脚 - 隐藏并显示另一个

3 个答案: