jquery调整窗口大小以适应内容答案

【问题标题】：jquery resize window to fit contentsjquery调整窗口大小以适应内容
【发布时间】：2011-10-22 06:52:25
【问题描述】：

我有一个显示300x300px 图片的简单弹出窗口，我将窗口的大小设置为350x350px，但根据浏览器的不同，我会得到滚动条或额外的空白区域。是否有一些 jQuery 函数可以调整浏览器窗口的大小以适应内容而没有任何滚动条或空白，无论是什么浏览器？

帮帮我！！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我遇到同样问题的部分问题是“resizeTo”会根据窗口的outside边界调整大小。这在处理不同的浏览器时确实没有帮助，因为浏览器之间的地址栏大小会有所不同，有些浏览器会遵守“location=no”指令，有些则不会。

对我有用的解决方案（其中确实包括一些 jQuery，抱歉，但您可能可以根据自己的喜好反转来实现它）是这样的：

window.resizeTo(422, $('#my-id').height() + (window.outerHeight - window.innerHeight));

我在 Safari、Firefox 和 Chrome 上对此进行了测试，它似乎适用于所有这些（没有安装 Windows，因此无法评论 IE）。

【讨论】：

【解决方案2】：

你可以做这样的事情..

function windowResize() {
   var contentWidth = document.getElementById("YourImageOrContent").offsetWidth;
   var contentHeight = document.getElementById("YourImageOrContent").offsetHeight;
   window.resizeTo(contentWidth,contentHeight);
}

您可能需要将值添加 20 像素左右...但我仍然保持原来的答案：-D

【讨论】：

我尝试过这样的事情，但由于某种原因，它仍然会以不同的方式调整每个浏览器上的弹出窗口。
是的，可能是因为 CSS，这是我最初的回复。尝试做上面的 * {} 东西，这样你应该在所有元素上都有 0 填充、边距、边框和轮廓，这应该允许你在所有浏览器上都有类似大小的窗口。（不是 100% 确定）
document.getElementById("#YourImageOrContent") 不正确。删除标签

【解决方案3】：

如果您正在弹出一个浏览器窗口（这是我的理解），那么在您的打开功能上，您应该执行以下操作：

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('image.jpg', 'newwindow', 'height=350,width=350, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no');
-->
</SCRIPT>

注意scrollbars=no

【讨论】：

【解决方案4】：

它可能是影响文档的 CSS 边距/填充。

做：

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

这是一个非常肮脏的 CSS 重置，如果您想要一个更优雅的解决方案，网络上有大量关于 CSS 重置的信息 :-)

但这有望让您深入了解问题..

【讨论】：

这与 CSS 无关，我需要一个函数来调整浏览器窗口的大小以适应内容。
您可能会发现，有时在不同浏览器中出现滚动条或空白的原因是 css 和 quirk 模式。
主要原因是浏览器边框大小不同。例如，Firefox 有一个胖窗口边框，而 Opera 几乎没有。而如果图片的大小是 300x300，window.resizeTo(args) 会让整个窗口变成 300x300，包括边框、按钮等等。
如果您尝试了 CSS 路由但仍然有问题。您将不得不浏览器嗅探并在这里和那里为不同的浏览器添加一些像素:-(