javascript - 使用 CSS 或 JavaScript 限制页面大小或限制位置以防止重叠

Question

我想在页面上添加页脚，但如果用户使页面太小，我不希望页脚与文本重叠。如果不制作一张大 table 或一大堆返回，我该如何防止这种情况发生？页脚代码位于包含的页面中。也许有一种方法可以选择何时打开滚动或从顶部 CSS 属性中选择最小值。

我觉得我已经解释得足够好了，这里有更多的解释:

在带有页脚的页面上，有一个标记 include('footer.php')。

在 footer.php 中，有一段文本在底部对齐，类似

<div style="position: fixed; bottom: 10px">Footer Text</div>

如果用户使窗口太小，文本将覆盖其他所有内容。我宁愿它留在底部并出现一个滚动条。

Answer 1

问题不明确，但您可能正在寻找 responsive layout .这允许您在视口(viewport)的尺寸低于某个“断点”时使用一组不同的 CSS 规则。

具体技术称为media queries .当视口(viewport)太短时，您可以使用它来隐藏页脚，如下所示:

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