怎样让相邻的两个元素高度一样？

Question

如下图所属，希望右侧区域的高度能与左侧一致，通过布局和CSS应该怎样实现？

Answer 1

可以使用 flex或者 负margin解决

html 结构

<section>
    <nav>
        111   
    </nav>
    <main>
        111
        <br />
        222
    </main>
</section>

flex方案

section {
    display: flex;
    flex-direction: row;
}
nav {
    width: 50%;
    background: red;
}
main {
    width: 50%;
    background: blue;
}

负margin

section {
    overflow: hidden;
    width: 100%;
}
nav {
    float: left;
    width: 50%;
    margin-bottom: -20000px;
    padding-bottom: 20000px;
    background: red;
}
main {
    float: left;
    width: 50%;
    margin-bottom: -20000px;
    padding-bottom: 20000px;
    background: blue;
}

Answer 2

右侧区域的高度能与左侧一致 手打代码 http://jsrun.net/QnYKp/edit

Answer 3

用js获取左边框高动态设置右边框高度