<!DOCTYPE html><html><head><style>*{margin: 0;padding: 0;list-style: none;}body{ width: 1180px; margin: 0 auto;}.head{ width: 100%; height: 60px; background: red;}.main{ margin: 30px 0 ; height: 100%; overflow: hidden;
}.foot{ width: 100%; height: 40px; background: #000; clear: both;}.left{ float: left; width: 210px; height: 1300px; border: 1px solid red; background: green;}
.right{ float: right; width: 930px; height: 900px; border: 1px solid red; background: #ccc;
}</style><!--<script> (function(){ window.οnresize=window.οnscrοll=window.οnlοad=function (){ var oDiv=document.getElementById('form-wrap'); var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; var clientHeight=document.documentElement.clientHeight; var t=document.body.scrollHeight; var bodyH= scrollTop+clientHeight; if(Math.abs(bodyH - t ) < 5){ oDiv.style.bottom='40px'; }else{ oDiv.style.bottom='0px'; } }; })(); </script> --><script>window.οnlοad= window.οnscrοll=function(){ var oLeft = document.getElementById('left'); var oRight = document.getElementById('right'); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//当left的height最大为right的高 if(oLeft.offsetHeight >oRight.offsetHeight){ oLeft.style.height =getStyle(oRight,'height') +'px'; }
//当left的scrollTop为0，fixed if(scrollTop > oLeft.offsetTop){ oLeft.style.position ='fixed'; oLeft.style.top = '0'; if(oLeft.offsetHeight<oRight.offsetHeight){ oLeft.style.height =getStyle(oRight,'height') +'px'; }else{ oLeft.style.height =document.documentElement.clientHeight -70 +'px'; } }else{ oLeft.style.position =''; }
function getStyle(obj,name){ return obj.currentStyle ? obj.currentStyle[name] :getComputedStyle(obj, false)[name]; }
}</script></head><body><div class="head"></div><div class="main"> <div class="left" id="left"> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul> </div> <div class="right" id="right">这里是内容</div></div><div class="foot"></div></body></html>
转载于:https://www.cnblogs.com/heboliufengjie/p/4673732.html
