JS的各种宽高的含义。

遇到一个需求，写一个类QQ的文件列表，想把头部固定，下面内容滚动。暂时想到的办法是，头部元素<header></header>和内容元素<main></main>独立，然后每一列的元素<item></item> 放在<main></main> 里面，形成这样一个结构：

<div class="container">    <header></header>    <main>        <item></item>        <item></item>    </main></div>

其中header、main 以及 item的宽度都是100% ，为了让header 和item里面的内容上下对齐，所以<header>和<item> 都选择了弹性布局。效果图如下：

但是问题出现了，在main 的内容超出高度后，出现了滚动条，由于滚动条有宽度，main 的内容（padding + content）变小，导致item 变小，而header 还是没变，直接导致了header 和item 的每个内容都不能对齐。

方案之一是通过JS和css同事来进行控制。
基本思路是，css方面，给mian预定一个滚动条的位置。js方面，获取浏览器的滚动条宽度，然后将header 的宽度减去滚动条宽度，补上（padding）。

//css，不管超不超出都先给容器一个滚动条的位置main{    overflow-y:scroll;}

//jsfunction listWidthChange(header，content){    var fileContentWidth = content[0].offsetWidth;    var fileContentScrollWidth = content[0].scrollWidth;    var scrollWidth = fileContentWidth - fileContentScrollWidth;    var fileHeaderNewWidth = fileContentWidth - scrollWidth;    header.css({        width: fileHeaderNewWidth,        paddingRight:fileHeaderNewWidth    });}$(function(){    listWidthChange($('header')，$('main'));})

这样就解决问题了。如果以后还有别的好办法会回来更新。

<- - - - - - – - – - -分割线 – - - - - - - – - - - - - – >

上面的代码使用了offsetWidth 以及 scrollWidth这个两个属性，获取了元素的宽两种宽度，从而计算出浏览器滚动条的宽度。
但JS还提供了很多宽高属性，下面总结一下:

//宽var obj = document.getElementById(xxxxx);obj.offsetWidth //返回元素宽度，不含外边距(margin)jqObj.width() //返回元素宽度，不含外边距(margin)，可设值jqObj.outWidth(false) //默认参数为false，返回元素宽度，不含外边距(margin)jqObj.outWidth(true) //默认参数为false，返回元素宽度，含外边距(margin)obj.clientWidth //返回元素宽度，不含偏移值（overflow-x超出时）、外边距（margin）obj.scrollWidth //返回元素宽度，含偏移值（overflow-x超出时）、不含外边距（margin）obj.clientTop //返回元素的边框宽度（border-size）//高和宽是一样的

这些属性个地方需要注意，那就是被操纵的元素必须是占位的，如果设置成display:none ，那以上js原生属性的值都为0。设置成visibility:hidden 还是能取到正确的值。

取滚动条偏移值：

document.documentElement.scrollTop