如何让一个元素不触发滚动条？

Question

如何让一个元素不触发滚动条？

4

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

然而，在更高的浏览器窗口中，我想要一些额外的内容（版权行）显示在661px之下。但是再次强调，在窗口高度小于661px之前，不应出现滚动条，即页脚应在滚动条出现之前被裁剪掉。

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

   (1)           (2)           (3)

窗口高度大于661像素；无滚动条
窗口高度正好为661像素；页脚被裁剪，但仍然没有滚动条
窗口高度小于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;
}

这将所有元素放在正确的位置，但是页脚仍然会导致页面高度增加，从而触发滚动条，即使它位于高度较小的元素内部。无论在Chrome还是Firefox中，在html，body和.all上使用任何组合的overflow和height似乎都无法解决这个问题。

怎么做才是正确的呢？

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

- Thomas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Levi Botelho · Accepted Answer

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

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

将样式表应用于屏幕视图，其中浏览器窗口的最大高度为661px，这将包括iPad但不包括更大的设备。然后，在此样式表中，您可以使版权信息display:none以从文档流中删除它。

刚看到您的编辑。您应该能够使用媒体属性的高度属性来实现您想要的效果。我假设您的内容将被缩小到像素大小以适合661px高的屏幕，因此您只需要在任何较高的屏幕上插入版权信息。较小的屏幕将自动具有滚动条，并且661px的iPad屏幕应该正好合适。

我无法测试此功能，所以如果您告诉我它的工作情况（或不工作），我会非常感激 :)