높이가 서로 다른 두 div의 콘텐츠를 정렬하는 방법은 무엇입니까?

Question

두 개의 div 컨테이너가 있습니다. 왼쪽 컨테이너는 화면 왼쪽 절반을 덮고 오른쪽 컨테이너는 오른쪽 절반을 차지합니다. 두 용기 내부 I은 텍스트 박스가 가로 정렬되어야 할 변수 높이

.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

는 창 전체 가시 높이에 걸쳐 용기를 사용하는 경우, 이것은 상기도 1/100 나타내는 단위이다 vh에 %에서 height와 margin-top 유닛을 스위칭함으로써 달성하기 쉽다 - 포트 높이.

.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