使用窗口大小 jquery 动态调整元素大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11367109/
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
Dynamically resize element with window size jquery
提问by d-_-b
I've looked at many questions regarding this subject and can not seem to find out what is wrong with my code. Any help would be greatly appreciated!
我已经查看了许多关于这个主题的问题，但似乎无法找出我的代码有什么问题。任何帮助将不胜感激！
$(window).resize(function(){
var newwidth = $(window).innerWidth();
var newheight = $(window).innerHeight();
$("#element").height(newheight).width(newwidth);
});
I'm trying to resize #element to the same height and width as the window if the window is resized.
如果调整窗口大小，我正在尝试将 #element 调整为与窗口相同的高度和宽度。
回答by Engineer
About .innerWidth(), from docs:
关于.innerWidth()，来自文档：
This method is not applicable to window and document objects; for these, use .width() instead.
此方法不适用于窗口和文档对象；对于这些，请改用 .width() 。
There is same notefor .innerHeight()also.
有相同的音符为.innerHeight()也。
So you need to use .width()and .height():
所以你需要使用.width()和.height()：
$(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();
$("#element").height(newheight).width(newwidth);
});
回答by undefined
try this:
尝试这个：
$(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();
$("#element").css({"height": newheight, "width": newwidth });
});
回答by Control Freak
You can always just use CSS:
你总是可以只使用 CSS：
#element {width:100%; height:100%; position:fixed; }
回答by Francisco Valdez
In plain Javascript you can do this:
在纯 Javascript 中，您可以执行以下操作：
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
var mydiv = document.getElementById("element");
mydiv.style.height=viewportheight'px';
mydiv.style.width=viewportwidth+'px';
回答by Mina Gabriel
$(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();
$("#element").height(newheight).width(newwidth);
});?
both works for me
两者都对我有用
$(window).resize(function(){
var newwidth = $(window).innerWidth();
var newheight = $(window).innerHeight();
$("#element").height(newheight).width(newwidth);
});?
