html - CSS 响应式页脚 - 隐藏和显示另一个

我有一个 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 没有出现。

有什么想法吗？

我在这里创建了一个 fiddle :http://jsfiddle.net/Er7vy/

最佳答案

你已经把你的 #small-footer 放在了你的 #footer 中，所以当页脚不显示时，它里面的所有东西都会被隐藏(包括你的小页脚)

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

关于html - CSS 响应式页脚 - 隐藏和显示另一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16609913/