放大到原始页面宽度的 180% 时，网页中的页脚出现问题答案

【问题标题】：Issue with footer in webpage when zoomed in to 180% of original page width放大到原始页面宽度的 180% 时，网页中的页脚出现问题
【发布时间】：2012-10-29 17:26:12
【问题描述】：

已通过屏幕打印问题更新： 请参考附图，我在红色框中标记了页脚在网页缩放级别为 200% 时终止的位置

如图所示，在这个缩放级别上内容是灵活的 - 没有中断。但是页脚总是只扩展这么多，剩下的部分被空白占据。

原始问题：

我设计了一个网站，并正在测试设计的几个特性，并注意到页脚从非常低的缩放级别（比如 10%）到接近 180% 的缩放都可以正常工作。但是在说 180% 缩放之外，页脚会收缩，并且行为如下 -

（假设页脚是一个div，高度设置为100px，高度设置为100px，宽度设置为100%，背景为深蓝色）。

在 180% 缩放时，水平滚动条出现在浏览器中。页脚的右端出现在需要进行水平滚动的点上，或者换句话说，它看起来好像是 100% 的视口；仅在移动水平滚动条时，我们将看到页脚实际结束，并且从页脚的右端到页面的实际右端以 180% 缩放有白色背景。

虽然我没有遇到标题的这个问题。它适用于任何缩放（放大/缩小）级别。我似乎找不到页脚的问题，因为页眉和页脚在 css 中的布局几乎相同。

非常感谢有关如何解决页脚缩放问题的任何想法/方法。

谢谢！（我真的很希望这个问题足够清楚:)

【问题讨论】：

一张图片会让事情变得更容易理解。
我永远无法理解为什么人们如此关心放大到巨大比例的网站。
@ZippyV 除标题外只有 221 个单词。一张照片肯定会有帮助，因为它们值 1000 美元。
:) 已包含图片！

标签： css xhtml zooming footer

【解决方案1】：

这是一个答案尝试，但您的帖子缺少几个重要的部分来帮助您：

链接？或者需要代码 sn-ps - 使用 pastebin 或其他东西。
您指的是什么浏览器？

根据描述，听起来您的内容本身会放大/放大，直到遇到硬性内容限制，例如固定的图像宽度或长字符串（即 URL）。内容中的某处也可能指定了最小宽度。

归根结底，这种行为可能特定于特定浏览器 - 您是否在其他浏览器中尝试过？他们的行为都一样吗？

【讨论】：

我已经包含了丝网印刷，以提供更好的清晰度。但是无法发布代码:(它在所有流行的浏览器（IE / ff ...）中都以这种方式运行。我没有看到任何地方提到的最小宽度。一旦出现水平滚动条，页脚就会以某种方式拒绝扩展，但是页面中的所有其他元素都足够灵活，可以根据情况进行扩展/收缩。
根据附上的图片，我猜页脚有一个固定宽度的背景图片，并且不重复？
背景图片是一个平铺，设置为repeat-x。

【解决方案2】：

有趣的是，我刚刚检查了该网站 (stackoverflow.com) 的页脚在放大到 200% 时的行为，它与我的行为完全相同。所以我猜还有很多其他网站（另一个是 Design Instruct - http://designinstruct.com/）也有同样的担忧。我猜任何显示全长页脚（在视口中从左到右 100%）的网站在用户稍微放大时肯定会遇到这个问题。

对于所有问这让我感到困扰的人，如果您尝试在任何智能手机中加载您的网站并且用户将其缩放到 120% 的水平，您会看到页脚的问题。对于许多人来说，这些可能微不足道，足以让他们沉思一晚，然后就这样，但对我来说，我绝对想看看是否有解决方案。

结束这个问题，虽然没有解决，因为我没有看到很多建设性的建议。无论如何，谢谢。

【讨论】：

【解决方案3】：

我遇到了同样的问题。我尝试了一堆不同的解决方案。对我有用的是最简单的。不确定您纠正此问题的主要原因是什么，但我的原因是我们的大部分流量 (10%) 使用的是分辨率为 1024x768 的旧显示器。因此，他们正在访问我们的网站，需要向右滚动才能看到完整的内容。当他们向右滚动时，我的页眉和页脚被打破了。我将它应用于 body 标签并修复了所有内容。

body {
min-width: 1024px;
max-width: auto;
}

希望这对你也有用。

【讨论】：