1/3과 2/3 블록에서 3/3의 css3 수직 분할

Question

나는 flexbox를 사용할 수 있다고 생각했지만 이것에 대한 정보는 찾지 못했습니다. 내가 flexbox를 사용하여 수직 레이아웃을 검색했지만 성공하지 못했습니다.

는 기본적으로 내가 원하는 것은 다음과 같은 시나리오입니다 : 나는 높이의 3/3이

내가 (이 offcourse 가능한 경우)이 개 부분에서 CSS를 사용하여 그것을 나눌, 한 부분은 1/3 소요 또 다른 2/3

_______ 
| 1/3 | 
------- 
| 2/3 | 
|  | 
------- 

내가 자바 스크립트와 함께이 작업을 수행 할 수 있습니다 알고, 그리고 내가 현재 뭘하는지,하지만 난 CSS3 생각은 이러한 가능성을 가져 아니면 내가 잘못입니까?

Answer 1

body 및 html의 높이를 100 %로 설정 한 다음 각 요소를 원하는 높이로 설정하십시오. Divs의 성장을 막기 위해 overflow: hidden에 추가하십시오. 수직 여백은이 레이아웃을 망칠 것이므로 패딩을 사용하십시오.

DEMO

CSS :

body, html { 
    height: 100%; 
} 

.top { 
    height: 33.3333%; 
    overflow: hidden; 
    background: blue; 
} 

.bottom { 
    height: 66.6666%; 
    overflow: hidden; 
    background: green; 
}  

Answer 2

이 당신 몸의 직접적인 아이로 이외의이 1-2/3 사업부의 어딘가를 사용할 수 있습니다 position:absolute;을 사용하고 달성하는 또 다른 방법. 이 JSFiddle를 참조하십시오

body{margin:0;padding:0;} 
.container{position:absolute;height: 100%;background-color:green;} 
.ot{height: 33%;background-color:red;} 
.tt{height:67%;background-color:yellow;} 

예를 들어, 효과를 볼 수 300px에 .container의 height을 설정합니다.