jQuery的 - 在调整大小

创建灵活的宽度我想拥有灵活的宽度，我的意思是，当我尝试自动调整窗口，我的窗户宽度的变化（根据窗口宽度），而不刷新jQuery的 - 在调整大小

我想这样做我的样品中文件，我该如何做到这一点？

我的样本文档：

<!DOCTYPE html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 

$(document).ready(function() { 
    var Ww = $(window).width() 
    var Wh = $(window).height() 
    $('.test').css({"width":Ww+"px","height":Wh+"px"}); 
}); 
</script> 
<style> 
* { 
    margin:0; 
    padding:0; 
} 
.test { 
    background-color:#000; 
} 
</style> 
</head> 
<div class="test"></div> 
<body> 
</body> 
</html>

来源

2013-10-27 AliM

-1

您可以通过CSS，无需使用jQuery它的做到这一点。

.test { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
}

但是，如果你还有什么理由通过jQuery这样做，你需要添加的功能。

<script> 
$(window).resize(function() { 
    var Ww = $(window).width() 
    var Wh = $(window).height() 
    $('.test').css({"width":Ww+"px","height":Wh+"px"}); 
}); 

$(document).ready(function() { 
    var Ww = $(window).width() 
    var Wh = $(window).height() 
    $('.test').css({"width":Ww+"px","height":Wh+"px"}); 
}); 
</script>

来源

2013-10-27 19:28:18

我不想使用CSS，因为在我的网页许多动作都使用jQuery – AliM

好吧，如果你坚持，我已经添加了jQuery的代码。希望有所帮助:) –

谢谢，但它只适用于页面调整大小时，所以当你第一次运行打开页面没有调整大小，它什么也没有显示 – AliM

function resizer(){ 
    var Ww = $(window).width(), 
     Wh = $(window).height(); 
    $('.test').css({width:Ww, height:Wh}); 
} 

$(function(){ // DOM READY 
    resizer(); 
}); 

$(window).resize(function(){ 
    resizer(); 
});

来源

2013-10-27 19:52:03

Thankyou，它工作正常:) – AliM

有没有什么办法可以在document.ready中使用resizer没有问题？ – AliM

@AliM我不认为我理解你的问题。在我的示例中，您具有DOM就绪功能（只需缩短） –

jQuery的 - 在调整大小

回答

相关问题