等高布局 - absolute 辅助

by redky

HTML

<div class="box">
    <div class="main">aaaa</div>
    <div class="side">bbbb</div>
    <div class="helper-main"></div>
    <div class="helper-side"></div>
</div>

CSS

.box {
  position: relative;
  overflow: hidden;
}

.main,
.side {
    position: relative;
    z-index: 3;
}
.main {
    width: 420px;
    height: 200px;
    float: left;
    background: #faa;
}

.side {
    overflow: hidden;
    background-color: #818181;
    height: 300px;
}

.helper-main,
.helper-side {
    position: absolute;
    top: 0;
    height: 1000px;
}

.helper-main {
    z-index: 2;
    width: 420px;
    background: #faa;
}

.helper-side {
    z-index: 1;
    width: 100%;
    background: #818181;
}