左右两列式布局，等高同步

本文主要是介绍左右两列式布局，等高同步，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

左右两列式布局，左侧高度根据右侧内容的增减与右侧保持一致

//父类

.box-a{
    width: 1200px;
    background-color: #f4f4f4;
    overflow: hidden;
}

//左侧
.side{
    margin-bottom:-9999px; padding-bottom:9999px;
    float: left;
    margin-right: 14px;
    width: 235px;
    min-height: 572px;
    background-color: #fff;
}

//右侧
.content{
    margin-bottom:-9999px; padding-bottom:9999px;
    float: left;
    width: 951px;
    min-height: 572px;
    background-color: #fff;
}

(function() {

//左侧工具栏var $user_sidebar = $('.user-sidebar');

//右侧contentvar $userMain = $('.userMain,.user-content');

//左侧工具栏高度
    var _us_height = $user_sidebar.height();

//右侧content高度
    var _um_height = $userMain.height();

//定义一个最小高度var _min_height = [780];

//比较左右_min_height.push(_us_height, _um_height);

    _min_height.sort(function(a, b) {return a - b;});var _min = _min_height.pop();$userMain.height(_min);$user_sidebar.height(_min);
})();

这篇关于左右两列式布局，等高同步的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---