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

来源：互联网发布：数据库建立一对一关系编辑：程序博客网时间：2024/05/19 22:58

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

//父类

.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');

//右侧content    var $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);})();

0 0