zoukankan      html  css  js  c++  java
  • jquery动态调整div大小使其宽度始终为浏览器宽度

    需要设置宽度为整个浏览器宽度的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 

    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的宽度进行调整。

  • 相关阅读:
    洛谷1525关押罪犯——二分
    洛谷P1525关押罪犯——二分做法
    poj2411铺砖——状压DP
    1 理解Linux系统的“平均负载”
    3.2-3 tac、more
    3.20 tr:替换或删除字符
    3.14-19 wc、iconv、dos2unix、diff、vimdiff、rev
    3.21-22 od、tee
    指针和引用的区别
    new与malloc区别
  • 原文地址:https://www.cnblogs.com/sjqq/p/6410605.html
Copyright © 2011-2022 走看看