绝对定位与等高布局实例页面

展示

代码

CSS代码：

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

.out_box{width:66%; margin-left:auto; margin-right:auto; border:1px solid #ccc; background-color:#f5f5f5; overflow:hidden; position:relative;}
.left_box{width:25%; float:left; position:relative;}
.right_box{width:74.6%; float:right;}
.left_box_bg{background-color:#fff; border-right:1px solid #ccc;}
.left_con{padding:1em; position:relative; z-index:1;}
.right_con{padding:1em;}
.out_box img{display:block;}
.btn_box{width:66%; margin:1em auto 3em;}
            

HTML代码：

<div class="out_box">
    <div class="left_box">
        <div class="equal_height left_box_bg"></div>
        <div id="leftCon" class="left_con">
            <img src="//image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
        </div>
    </div>
    <div class="right_box">
        <div id="rightCon" class="right_con">
            <img id="rightImage" src="//image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
        </div>
    </div>
</div>
<div class="btn_box">
    <button id="btnLeftSide">左侧栏高度增加</button>
    <button id="btnRightSide">右侧栏高度增加</button>
</div>
            

JS代码：

$("#btnLeftSide").bind("click", function() {
    $("#leftCon").append('<img src="//image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />');
});
$("#btnRightSide").bind("click", function() {
    $("#rightCon").append('<img src="//image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />');
});