CSS를 사용한 3 중 패널 레이아웃

Question

CSS만으로 이러한 레이아웃을 구현할 수 있습니까?

jQuery와 CSS의 조합을 사용하여 여러 번이 스타일 레이아웃을 만들었습니다. 페이지 너비를 계산하고 요소 너비와 높이를 공제합니다. resize 이벤트 내에서 이러한 너비와 높이를 다시 계산하지만 모바일 장치에서는 그리 부드럽게 느껴지지 않습니다.

Answer 1

이 시도 :

#box1, #box2, #box3 { 
    position: fixed; 
    left:0; top:0; right:0; bottom:0; 
    padding:20px; 
} 
#box1 { 
    bottom:80%; /* 100 - 20 */ 
    border: 5px solid blue; 
} 
#box2 { 
    top:20%; 
    right:70%; /* 100 - 30 */ 
    border: 5px solid red; 
} 
#box3 { 
    top:20%; 
    left:30%; 
    border: 5px solid lime; 
}