• 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);
    }

  • 相关阅读:
    How to upload a file in MVC4
    安装升级System.Web.Optimization.dll
    Model Binding To A List
    TD中{text-overflow:ellipsis;} 用法
    表格
    CSS定位
    清除浮动的几种方式
    css浮动原理和特性
    前端规范
    块元素和内嵌元素
  • 原文地址:https://www.cnblogs.com/huangf714/p/5864362.html
Copyright © 2020-2023  润新知