div三列布局及div始终定位浏览器底部.docVIP

前一段时间在网上看到国外一些网站有关div三栏布局的css写法，采用position的相对与绝对定位，觉得蛮不错滴，决定收藏， 另外，想使靠近底部的bottom div不管页面有无出现滚动条，都始终靠底部定位。找不到好的解决办法，最后决定采用javascript来实现，判断中间三栏任一个div高度是否大于当前body的高度。来赋予div不同的css样式，本例用left div来与body做比较，当left div的高度大于body当前高度时，就给left div 赋予css样式divBottom，反之则赋予css样式divShortBottom 。 ?xml version=1.0 encoding=UTF-8?!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN/TR/xhtml11/DTD/xhtml11.dtdhtml xmlns=/1999/xhtml xml:lang=en headtitlediv三列布局及div始终定位浏览器底部/titlestyle type=text/css media=screenbody {margin:0;padding:0;}#header {height: 50px;background-color: #EAEAEA;border:1px solid #333;padding:4px;}#left {position:absolute;left:0;top:30px;padding:0;width:200px;color:#333;background:#eaeaea;border:1px solid #333;}.content {position:relative;top: 30px;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top: 30px;padding:0;width:200px;?color:#333;background:#eaeaea;border:1px solid #333;}#divContent {position:relative;width:100%;}#left p {padding:0 10px;}#right p {padding:0 10px;}p.top {margin-top:20px;}.divBottom {background-color:#f1f1f1;border:1px solid #333;position:relative;width:100%;margin-top:20px;}.divShortBottom {background-color:#f1f1f1;border:1px solid #333;position:absolute;bottom:0;width:100%;}/styleSCRIPT LANGUAGE=JavaScript!--function sameHeight() {var documentBodyHeight;?if( typeof( windows.innerWidth ) == number ) {??? //Non-IE??? documentBodyHeight = windows.innerHeight;?} else if( document.documentElement ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {??? //IE 6+ in standards compliant mode??? documentBodyHeight = document.documentElement.clientHeight;?} else if( document.body ( document.body.clientWidth || document.body.clientHeight ) ) {??? //IE 4 compatible??? documentBodyHeight = document.body.clientHeight;?}//alert(docu