3

我有一个固定高度的页面，661px，横向模式下 iPad 上 Safari 的高度。在 iPad 上，我不希望它滚动；内容应该完全适合。

然而，在更高的浏览器窗口中，我希望在 661px 折叠下方显示一些额外的内容（版权行）。但同样，在窗口高度小于 661 像素之前不应出现滚动条，即在滚动条出现之前应剪掉页脚。

+--------+    +--------+    +--------+ ^
|        |    |        |    |        | #
|        |    |        |    |        | v
+--------+    +--------+
  Footer 

   (1)           (2)           (3)
  1. 窗口高于 661px；没有滚动条
  2. 窗口正好 661px；页脚被剪裁，但仍然没有滚动条
  3. 窗口小于 661px；出现滚动条

我的简化标记如下：

<body>
  <div class="all">
    ... main content ...
    <div class="footer">Copyright!</div>
  </div>
</body>

以及相应的CSS：

.all {
  height: 661px;
  overflow: visible;
}

.footer {
  position: absolute;
  left: 0px;
  top: 661px;
}

这会将所有元素放在正确的位置，但不知何故，页脚仍然会影响页面高度并因此触发滚动条，即使它位于高度较小的元素内。overflow和heighton没有组合html，body并且.all似乎可以解决这个问题，无论是在 Chrome 还是在 Firefox 中。

这样做的正确方法是什么？

而且我还想问一个更普遍的问题：窗口上的滚动条是如何触发的？显然，如果 的高度body大于窗口，这不仅仅是因为 Chrome 检查器显示两者都html具有body预期的 661px 高度。

4

1 回答 1

2

为什么不使用条件样式表？添加以下标签

media="screen AND (max-height:661px)"

到样式表，它只适用于浏览器窗口的最大高度为 661 像素的屏幕查看，根据您的计算，这将包括 iPad，但不会更大。然后，您可以在此表中制作您的版权信息display:none，以将其从文档流中删除。

刚看到你的编辑。您应该能够使用 media 属性的 height 属性来做您想做的事情。我假设您的内容将被缩小到像素以适应 661 像素高的屏幕，所以您真正需要做的就是为任何更高的屏幕插入版权信息。较小的屏幕会自动有滚动条，而 661px 的 iPad 屏幕应该正好合适。

我无法对此进行测试，所以如果您告诉我它是如何工作的（或不工作），我将不胜感激:)

于 2012-12-09T15:53:30.047 回答