jquery动态调整div大小使其宽度始终为浏览器宽度

  有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现。

  

复制代码 代码如下:

  <!doctype html>

  <html>

  <head>

  <meta charset="utf-8">

  <title>jquery test</title>

  <script src="jquery-1.11.1.min.js"></script>

  <style type="text/css">

  .show

  {

  width: 500px;

  height: 50px;

  background-color: red;

  }

  </style>

  </head>

  <body>

  <div class="show"></div>

  <script>

  var browser_width = $(document.body).width();

  $("div.show").css("width",browser_width);

  $(window).resize(function() {

  browser_width = $(document.body).width();

  $("div.show").css("width",browser_width);

  });

  </script>

  </html>

  我们使用$(document.body).width()获取浏览器内容的宽度,在加载页面的时候我们初始化该div的宽度为浏览器页面的宽度,然后每当浏览器大小调整的时候,都会触发resize函数,此时我们再次对该div的宽度进行调整。