css - 如何以 50% 的高度对齐两个不同宽度的 div 中的内容？

Question

有两个 div 容器:leftcontainer 覆盖我屏幕的左半部分，rightcontainer 覆盖右半部分。两个容器内都有一个可变高度的文本框

.leftcontainer{
    position: relative;
    float:left;
    width:60%;
    height:100%;
}
.rightcontainer{
    position: relative;
    float: right;
    width:40%;
    height:100%;
}
.textbox{
    margin-top: 50%;
    width: 100%;
    background:#333333;
}

<div class="leftcontainer">
    <div class="textbox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
    </div>
</div>
<div class="rightcontainer">
    <div class="textbox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
    </div>
</div>

我希望文本框水平对齐:两者都应从 50% 高度开始。但它们只是对齐的，如果我将 leftcontainer 和 rightcontainer 的宽度都设置为 50%。
如果我这样做

.leftcontainer{width:60%;}
.rightcontainer{width:40%;}

右边的文本框向上移动。有人可以告诉我，如何解决这个问题？谢谢。

Answer 1

如果您使用容器来跨越窗口的整个可见高度，那么这很容易通过将 height 和 margin-top 单位从 % 到 vh 是表示视口(viewport)高度的 1/100 的单位。

.leftcontainer{
    position: relative;
    float:left;
    width:60%;
    height:100vh;
}
.rightcontainer{
    position: relative;
    float: right;
    width:40%;
    height:100vh;
}
.textbox{
    margin-top: 50vh;
    width: 100%;
    background:#333333;
}

http://jsbin.com/ahAfUba/1/edit?html,css,output