码迷,mamicode.com
首页 > 其他好文 > 详细

页面布局

时间:2015-05-13 12:16:58      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:

  前端的页面做好后,都要测试浏览器兼容的问题,但是还要测试页面在不同大小的屏幕上的布局尺寸问题,一般都是默认浮动左浮动,计算每个div的高度和宽度

最好是不要用边框,尽量给每个div不同的背景色,这样便于计算,大部分浏览器是不支持0.5px的,不支持的浏览器设置0.5px后会显示1px,页面的高度超过显示

器的可见高度会出现滚动条,计算宽度的时候要减去滚动条的宽度,滚动条宽度可以用js获取到(第一次写,写的不好不要喷啊)

Size: function () {
        var pwidth = 0, pheight = 0;
        // 初始化屏幕最大化
        if (document.body.offsetWidth < screen.width) {
            window.moveTo(0, 0);
            window.resizeTo(window.screen.availWidth, window.screen.availHeight);
        }
        // 浏览器内容可视区域宽|高度
        pwidth = document.documentElement.clientWidth;
        pheight = document.documentElement.clientHeight;

        // 设置界面框架大小
        $("pbody").width(pwidth);
        $("pbody").height(pheight);
        $(".top").height(68);
        $(".top").width(pwidth-2);
        $(".pBottom").width(pwidth - 22);
        $(".pBottom").height(pheight-72-3);
        $(".Right").height(pheight - 93 - 5);
        $(".Center").height(pheight - 93 - 5);

 

页面布局

标签:

原文地址:http://www.cnblogs.com/kinglyc/p/4499802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!