仿照淘宝首页做的一个高度伪对齐demo

功能就是当右边高度没有左边高的情况下做的一些处理，由于本人技术有限，不兼容所有浏览器，

 

<!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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>3</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>5</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>ss</p>
    <p>&nbsp;</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>

 

posted on 2014-04-03 14:58  小苦瓜  阅读(221)  评论(0)  编辑  收藏  举报

导航