功能就是当右边高度没有左边高的情况下做的一些处理，由于本人技术有限，不兼容所有浏览器，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body { width:1000px; margin:0 auto; } .top { height:200px; background-color:#6FF;} .left { width:500px; float:left; background:#f4f4f4; height:3000px;} .right { width:500px; float:right; height:1500px; background-color:#CCF; } .rightPostion { bottom:0px; top:auto; left:50%;} .bot { clear:both; background-color:#cc3; min-height:150px;} .cont { overflow: auto; position:relative; } </style> </head> <body> <div class="top">此处显示 class "top" 的内容</div> <div class="cont"> <div class="left" id="left">此处显示 class "left" 的内容</div> <div class="right rightPostion" id="right"> <p>此处显示 class "right" 的内容</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>3</p> <p> </p> <p> </p> <p> </p> <p>5</p> <p> </p> <p> </p> <p>ss</p> <p> </p> <p>d</p> <p>s</p> <p>d</p> <p>s</p> <p>笔筒圣诞节</p> </div> </div> <div class="bot">此处显示 class "bot" 的内容</div> <script> var r= document.getElementById("right"); var l = document.getElementById("left"); document.onkeydown = keydown ; window.onmousewheel = document.onmousewheel = wheel; var screenH = window.screen.availHeight; var maxH = l.offsetHeight+200-screenH; var positionH = r.offsetHeight+200-screenH ; function wheel(){ if(document.body.scrollTop>=positionH&&document.body.scrollTop<maxH){ r.style.position = "fixed" } else if (document.body.scrollTop<positionH) {r.style.position = "static" } else { r.style.position = "absolute" } } function keydown (e){ e = e || e.event ; var code = e.keyCode||e.which||e.charCode; console.log(code); if(code ==38 || code ==40){ wheel() } } </script> </body> </html>
仿照淘宝首页做的一个高度伪对齐demo,布布扣,bubuko.com
原文：http://www.cnblogs.com/xiaotian747/p/3643034.html