我有一个高度固定为661px的页面,这是iPad在横屏模式下的高度。在iPad上,我不希望它滚动;内容应该完全适配。
然而,在更高的浏览器窗口中,我想要一些额外的内容(版权行)显示在661px之下。但是再次强调,在窗口高度小于661px之前,不应出现滚动条,即页脚应在滚动条出现之前被裁剪掉。
这将所有元素放在正确的位置,但是页脚仍然会导致页面高度增加,从而触发滚动条,即使它位于高度较小的元素内部。无论在Chrome还是Firefox中,在
然而,在更高的浏览器窗口中,我想要一些额外的内容(版权行)显示在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高度。
max-height: 700px
。这样做可以确保只有在页脚全部显示的情况下才会出现。仍然可以接受不涉及媒体查询的其他答案,但这种方法相当优雅。 - Thomas