javascript jquery 调整窗口大小以适应内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6980772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery resize window to fit contents
提问by Caballero
I have a simple popup window that shows 300x300pxpicture, I set up the size of the window to be 350x350px, but depending on the browser I either get scroll bars or extra white space. Is there some jQuery function that would resize the browser window just to fit the content without any scroll bars or white space, no matter what browser?
我有一个显示300x300px图片的简单弹出窗口，我将窗口的大小设置为350x350px，但根据浏览器的不同，我会得到滚动条或额外的空白。是否有一些 jQuery 函数可以调整浏览器窗口的大小以适应内容而没有任何滚动条或空白，无论是什么浏览器？
Help me out!!
帮帮我！！
回答by FMD
You could do something like this..
你可以做这样的事情..
function windowResize() {
var contentWidth = document.getElementById("YourImageOrContent").offsetWidth;
var contentHeight = document.getElementById("YourImageOrContent").offsetHeight;
window.resizeTo(contentWidth,contentHeight);
}
You may have to add 20 pixels or so to the values... But I still maintain my original answer :-D
您可能需要为值添加 20 个左右的像素......但我仍然保留我原来的答案:-D
回答by Nathan Crause
Part of the problem I've faced with this same issue is that "resizeTo" resizes based on the outsidebounds of the window. That really doesn't help when dealing with different browsers, because the address bar size will be different between browsers, and some browsers will honour the "location=no" instruction, and some will not.
我遇到同样问题的部分问题是“resizeTo”根据窗口的外部边界调整大小。这在处理不同浏览器时确实没有帮助，因为地址栏大小在浏览器之间会有所不同，有些浏览器会遵守“location=no”指令，有些则不会。
The solution that worked for me (which does include some jQuery, sorry, but which you could probably reverse out to implement it however you like) is this:
对我有用的解决方案（它确实包含一些 jQuery，抱歉，但您可以根据自己的喜好取消它以实现它）是这样的：
window.resizeTo(422, $('#my-id').height() + (window.outerHeight - window.innerHeight));
I've tested this on Safari, Firefox and Chrome and it seemed to work for all of those (don't have a Windows installation, so can't comment for IE).
我已经在 Safari、Firefox 和 Chrome 上对此进行了测试，它似乎适用于所有这些（没有安装 Windows，因此无法对 IE 发表评论）。
回答by Dementic
if you are poping out a browser window (that is what i understood) then on your opening function, you should do something like this:
如果你弹出一个浏览器窗口（这是我的理解），那么在你的打开功能上，你应该做这样的事情：
<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>
notice the scrollbars=no
注意 scrollbars=no
回答by FMD
Its probably CSS margin / padding affecting the document.
它可能影响文档的 CSS 边距/填充。
do:
做：
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
That is a really dirty CSS reset there is tons on the web about CSS resets if you would like a more elegant solution :-)
这是一个非常脏的 CSS 重置，如果您想要一个更优雅的解决方案，网上有很多关于 CSS 重置的内容:-)
But this will hopefully give you an insight into the problem..
但这有望让您深入了解问题。
