css - CSS を使用した 3 パネル レイアウト

Question

このようなレイアウトを CSS だけで構築することは可能ですか?

jQuery と CSS を組み合わせて、このスタイルのレイアウトを何度も作成してきました。ページ幅を計算し、要素の幅と高さを差し引く。サイズ変更イベント内でこれらの幅と高さを再計算しますが、非常に汚い感じがし、モバイル デバイスではあまりスムーズではありません。

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