如何在缩小屏幕尺寸时使页脚不可见？

Question

我的页脚在正常的屏幕尺寸上绝对正常，但是当我在一定高度后缩小屏幕时，我希望它变得不可见。任何想法如何在不使用javascript的情况下进行操作？我的HTML和CSS片段如下：< / p>

HTML：

<footer class="footer">
        About
</footer>

CSS：

.footer{
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 10px;
    width: 100%;
    box-shadow: 0 0 3px white;
    color:white;
}

Answer 1

<强> jsFiddle Demo

在页面上使用max height media query以隐藏页脚。请注意，这与almost all browsers兼容，IE8除外。

html for demo

 <div id="footer">Footer</div>

CSS

@media (max-height:150px) {
 #footer{
  display:none;    
 }
}

Answer 2

使用此：

@media screen and (max-width: 500px) {
    .footer {
        display: none;
    }
}

DEMO和Source

Answer 3

在css文档中尝试媒体查询，如下所示：

media screen and (max-height:700px) {
  .footer {
    display:none;
  }
}

媒体查询采用了许多不同的参数，即最小高度，最小和最大宽度等。Mozilla dev涵盖了运算符，并提供了很好的示例。