css - 使用 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;
}