两列若干个表格，往下拉到底使两列保持等齐的效果是怎么做的？

类似：http://www.etao.com/，页面往下，左侧的内容会自动跟着往下走。

解决方案 »

  1.   

    不知道你是不是这个意思<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>22</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
    <script type="text/javascript">  $(function () {
                var category = $('#side_category'),
        sidebar = $('.layout_sidebar'),
        content = $('.layout_content'),
        maxTop, baseTop, scrollTop;
                var setPosition = function () {
                    maxTop = content.height() - category.get(0).offsetHeight;
                    baseTop = sidebar.offset().top;
                    scrollTop = $(document).scrollTop();
                    var t = scrollTop - baseTop;
                    if (t > 0 && t <= maxTop) {
                        category.css({ 'position': 'fixed', 'top': 0});
                    }
                    else if (t > maxTop) {
                        category.css({ 'position': 'absolute', 'top': maxTop });
                    }
                    else if (t < 0) {
                        category.css({ 'position': 'relative', 'top': 0 });
                    }
                };
                if (category.size()) {
                    setPosition();
                    $(window).scroll(function () {
                        setPosition();
                    });
                }
    });</script>
    <style type="text/css">
    body{padding:0px;margin:0px;}.layout{width:300px;margin:0 auto;border:1px solid #ddd;}
    .main{overflow:hidden;}
    .layout_sidebar{float:left;overflow:hidden;}
    #side_category{width:60px;border:1px solid #ddd;background-color:#ddd;height:200px;}
    .layout_content{float:right;width:200px;border:1px solid #ddd;background-color:red;height:600px;}
    .foot{border-top:1px solid #ddd;height:800px;background-color:#999;}
    </style>
    </head>
    <body><div class="layout">
    <div class="main">
    <div class="layout_sidebar">
    <div id="side_category">left
    </div>
     </div>
                <div class="layout_content">
    right
    </div>
    </div> </div>
    <div class="foot">foot</div>
    </body>
    </html>
      

  2.   

    顶一下，还没有解决，继续等待ing
      

  3.   

    <!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>
    <title> new document </title>
    <style>
    *{margin:0;padding:0;}
    .wrap{width:1000px;margin:0 auto;overflow:hidden;*zoom:1;}
    .left-box{position:relative;width:50%;float:left;}
    .left-box .box{left:0;top:0;background:#f5f5f5;}
    .right-box{position:relative;width:50%;float:right;}
    .right-box .box{left:0;top:0;background:#e0e0e0;}
    </style>
    <script>
    window.onload = function(){
    var leftBox = document.getElementById("left");
    var rightBox = document.getElementById("right");
    var fixedBox = leftBox.offsetHeight > rightBox.offsetHeight ? rightBox : leftBox;
    var isIE6 = !!window.ActiveXObject && !window.XMLHttpRequest; fixedBox.style.width = fixedBox.parentNode.offsetWidth + "px"; if(!isIE6){
    fixedBox.style.position = "fixed";
    fixedBox.style.left = fixedBox.parentNode.offsetLeft + "px";
    }else{
    fixedBox.style.position = "absolute";
    window.onscroll = function(){
    fixedBox.style.top = document.documentElement.scrollTop + "px";
    }
    }
    }
    </script>
    </head><body>
    <div class="wrap">
    <div class="left-box">
    <div id="left" class="box">
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    <p>left box</p>
    </div>
    </div>
    <div class="right-box">
    <div id="right" class="box">
    <p>right box</p>
    <p>right box</p>
    <p>right box</p>
    <p>right box</p>
    <p>right box</p>
    <p>right box</p>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  4.   


    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
        <script type="text/javascript">        $(function () {
                //获取要定位元素距离浏览器顶部的距离
                var navH = $(".Leigl").offset().top;
                //滚动条事件
                $(window).scroll(function () {
                    //获取滚动条的滑动距离
                    var scroH = $(this).scrollTop();
                    //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
                    if (scroH >= navH) {
                        $(".Leigl").css({ "position": "fixed", "top": 0, opacity: 0.7 });
                    } else if (scroH < navH) {
                        $(".Leigl").css({ "position": "static", opacity: 1 });
                    }
                })
            });
     
        </script>
        <style type="text/css">
         .Leig
         {
                width:100%;
                height:1000px;
                background: #333;
                border:1px red solid;
            }
            .Leigl
            {
                width:100%;
                height:100px;
                background:white;
                z-index:9999;
                border:1px red solid;
            }
    </style>
    </head>
    <body>
        <div class="Leig">
            <div class="Leigl">
            </div>
        </div>
    </body>
    </div>
    </html>
      

  5.   

    拜托楼上的帮我改改吧，我对javascript实在是无从下手，而且css部分貌似也不是完全左右对称的，拜谢！