具有可滚动 div 的等高布局

Question

我的布局如下：

     <div class="lower-content">
            <div class="col-1">
                <div class="scrollbox">
                    ........
                </div>
            </div>
            <div class="col-2">
                <img src="http://placehold.it/616x697/AA6600" alt="middle image" />
            </div>
            <div class="col-3">
                <p> .....
                </p>
                <img alt="Small Image" src="http://placehold.it/194x219/446600" />
            </div>
      </div> 

我到目前为止的尝试显示在小提琴中

小提琴：http://jsfiddle.net/gg47G/2/

为了更好的观看：http://jsfiddle.net/gg47G/2/show

问题：我想要的是所有三列的高度相同，并且在屏幕宽度=768px 之前一直响应。我已经弄清楚了手机的布局（低于 768px），只剩下桌面和平板电脑版本。

浏览器：我也需要一个适用于 IE8 的解决方案。

向col-3 添加边距和内边距是可以接受的，但高度应与col1 和col2 匹配 Jquery 解决方案是可以接受的，但没有外部库。虽然我更喜欢 css 解决方案，但我认为这是不可能的。

Answer 1

小提琴：fiddle

这里是js代码

$(document).ready(function(){
    commonHeightToAllDiv('.common');
});
// value will be changed if resied
$(window).resize(function(){
    commonHeightToAllDiv('.common')
});
function commonHeightToAllDiv(handeler){
    // calculating all the heights of .common
    var heights = $(handeler).map(function () {
            return $(this).height();
        }).get();

    // calculating maximum value among the heights
    var max_height_of_content_boxes = function (array)             {
        return Math.max.apply(Math, array);
    };

    // implementing maximum to all .common
    $(handeler).height(max_height_of_content_boxes(heights));
}

CSS 代码

.lower-content {
    border-top: 1px solid #b2b2b2;
    margin: 1% auto 0;
    padding: 1% 0 0;
    width:1200px;
}

.col-1 {
    display: inline-block;
    padding: 0 1% 0 0;
    vertical-align: top;
    width: 22%;
}
.scrollbox{
    font-size: 1.2em;
    overflow: auto;
}
.col-2 {
    display: inline-block;
    margin: 0 1% 0 0;
    vertical-align: top;
    width: 53%;

 }

.col-3 {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    width: 22%;
}

解释：

每个 div 都有其动态高度。首先我们需要找到那些是什么。然后得到最大值。并在每个 div 上实现该值。调用响应式函数使 js 代码响应式。