BFE.devAI解答 - CSS 问题
21. Holy Grail Layout

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

.body { flex-grow: 1; /* This will make body take up remaining space */ }

.left-sidebar, .right-sidebar { width: 100px; /* Set fixed width 100px for both sidebars */ }

.header, .footer { height: 50px; /* Set height for header and footer */ }

.footer { margin-top: auto; /* Set margin-top:auto for footer to make it sticky */ }

/* Optional styles for demonstration purpose */ .header { background-color: #444; color: #fff; }

.left-sidebar { background-color: #efefef; }

.body { background-color: #fff; }

.right-sidebar { background-color: #efefef; }

.footer { background-color: #444; color: #fff; }