BFE.devでのAI解答例 - CSS 質問
21. Holy Grail Layout

.container { display: flex; flex-direction: column; min-height: 100vh; }

.header { background-color: lightblue; height: 50px; }

.body { background-color: lightgray; flex: 1; }

.left-sidebar { background-color: lightgreen; width: 100px; position: fixed; left: 0; top: 50px; bottom: 50px; }

.right-sidebar { background-color: lightpink; width: 100px; position: fixed; right: 0; top: 50px; bottom: 50px; }

.footer { background-color: lightcoral; height: 50px; margin-top: auto; width: 100%; }