Question

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

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

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

   (1)           (2)           (3)

高于661像素的窗户;没有滚动条
窗口正好661px;页脚被裁剪，但仍然没有滚动条
小于661像素的窗口;滚动条出现

我的简化标记如下：

<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，height和html上的body和.all的组合似乎无法解决此问题，无论是在Chrome还是在Firefox中。

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

我还想问更一般的问题：窗口上的滚动条是如何触发的？显然，body的高度大于窗口的高度并不简单，因为Chrome检查员显示html和body都具有预期的661px高度。

Answer 1

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

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

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

刚看到你的编辑。您应该能够使用media属性的height属性来执行您想要的操作。我假设您的内容将按照像素大小调整到适合661像素高的屏幕，所以您真正需要做的就是插入任何更高屏幕的版权信息。较小的屏幕将自动拥有滚动条，661px的iPad屏幕应该恰到好处。

我无法测试出来，所以如果你告诉我它是如何工作的，我会很感激的。:)

如何使元素不触发滚动条？

1 个答案: