zoukankan      html  css  js  c++  java
  • jQuery实现布局高宽自适应

    在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。

    主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

    HTML-code

    <div id="header"></div>
    <div id="left"></div>
    <div id="right"></div>

    JS-code

    $(document).ready(function() {
    initLayout();
    $(window).resize(function(){
    initLayout();
    });
    });
    function initLayout() {
    $('#right').width(document.documentElement.clientWidth - $("#left").width()-2);
    var h = document.documentElement.clientHeight - $("#header").height()-5;
    $('#left').height(h);
    $('#right').height(h);
    }

  • 相关阅读:
    函数作业1
    函数、装饰器、迭代器、内置方法总练习题
    疑问
    装饰器
    文件练习题1,2
    内置函数练习题和总结
    GET和POST请求的区别
    HTTP请求方法
    HTTP之状态码
    HTTP之响应消息Response
  • 原文地址:https://www.cnblogs.com/huangf714/p/5864362.html
Copyright © 2011-2022 走看看