.container {
            overflow: hidden;
        }

        .container .left {
            float: left;
            width: 100px;
            padding: 10px;
            background-color: blue;
            padding-bottom: 3000px;//增加left的高度，父元素的高度会被撑开
            margin-bottom: -3000px;//减小父元素的高度，最终的效果就是父元素的高度根据内容改变 见http://www.cnblogs.com/xiaofenguo/p/6088231.html
        }

        .container .right {
            margin-left: 10px;
            background-color: red;
            padding: 10px;
            height: 300px;
        }
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

 .container {
            display: table;
            width:100%;
        }

        .container .left {
            display: table-cell;
            width: 20%;
            padding: 10px;
            margin-right:-300px;
            background-color: blue;
        }

        .container .right {
            width:80%;
            display: table-cell;
            background-color: red;
            padding: 10px;
            height: 300px;
        }

.container {
            overflow: hidden;
            border: 1px solid #000;
            width: 500px;
            margin: 0 auto;
            position: relative;
        }

        .container .left {
            width: 20%;
            float: left;
            position: relative;
            background-color: #ccc;
        }

        .container .left .leftBorder {
            border-right: 1px solid red;
            position: absolute;
            width: 100%;
            left:0;
            top:0;
            height: 999999em;
        }

        .container .left .leftInfo {
            position: relative;
            padding: 10px;
            z-index: 1;

        }

        .container .right {
            padding: 10px;
            position: relative;
            background-color: beige;
            width: 70%;
            float: right;
        }

        h4 {
            padding: 10px;
        }
<div class="container">
    <div class="left">
        <div class="leftBorder"></div>
        <div class="leftInfo"></div>
    </div>
    <div class="right">
        <h4>②回流与渲染</h4>
        早先时候我曾翻译过两篇关于回流与重绘的文章，“最小化浏览器中的回流(reflow)”以及“回流与重绘：CSS性能让JavaScript变慢？”。
        我自己是没测过。不过根据上面这两篇文章的说法，以及一位口碑前端前辈的说法，使用absolute隐藏于显示元素是会产生重绘而不会产生强烈的回流。而使用display:none不仅会重绘，还会产生回流，DOM影响范围越广，回流越强烈。所以，就JavaScript交互的呈现性能上来讲，使用absolute隐藏是要优于display相关隐藏的。
        <h4>③配合JavaScript的控制</h4>
        说到元素的显示与隐藏，免不了与JavaScript的交互。例如display相关的隐藏于显示，就是display:block/inline/inline-block/...与display:none。
        要让元素隐藏，很简单，直接：
        dom.style.display = "none";
        但是，如果要显示隐藏的元素，咋办呢？因为不同的标签所处的display水平是不一样的，于是，我们很难有一个简单的统一的显示方法。例如，下面的代码可能使用于div,
        p标签，但是对于span等inline水平的元素，可能就会嗝屁了（原本单行显示结果换行）。
        dom.style.display = "block";
        况且，随着浏览器的不断进步，以后类似于display:table-cell，display:list-item会越来越多的使用。再想通过display实现通用的显隐方法难度又会增大些。
        这就是使用display属性控制元素显隐的局限性。顺带一提的是jQuery的显隐方法show()/hide()/toggle()就是基于display的，其会存储元素先前的display属性值，于是元素再显示的时候就可以准确地显示出之前的display值了
    </div>
</div>

.leftBorder{width:100%; height:999em; position:absolute; left:0; top:0;}