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

我的页脚在正常的屏幕大小上是绝对不错的，但我希望在屏幕缩小到一定高度后，页脚会变得不可见。有什么办法不用javascript就可以做到吗？我的HTML和CSS代码片段如下：

HTML:

在页面上使用最大高度媒体查询以隐藏页脚。请注意，除了IE8-，这在中是兼容的

演示用html

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

使用以下命令：

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

---

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

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

媒体查询采用了许多不同的参数，例如最小高度、最小和最大宽度等。这些操作符都有很好的例子。

请看一看。它们允许您根据屏幕大小等显示/隐藏元素。

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

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

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