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

  • 相关阅读:
    实现可折叠的列表
    ajax知识点补充
    Ajax 完整教程
    从页面左边飞入页面动画效果
    文字闪烁
    点击按钮之后等待60秒
    [SCOI2016]萌萌哒
    [HNOI2011]卡农
    [NOI2015]寿司晚宴
    【bzoj 3489】A simple rmq problem
  • 原文地址:https://www.cnblogs.com/sjqq/p/6410605.html
Copyright © 2011-2022 走看看