使用CSS的三面板佈局

Question

是否可以單獨使用CSS來構建這樣的佈局？

我已經使用jQuery和CSS的組合很多次構建了這種樣式佈局。計算頁面寬度並扣除元素的寬度和高度。在resize事件中重新計算這些寬度和高度，但它只是感覺很髒，而且在移動設備上不太流暢。

Answer 1

試試這個：（假設<div id="box1">，<div id="box2">，<div id="box3">）

#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; 
}