AI solution for CSS coding question on BFE.dev
21. Holy Grail Layout

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

.header { background-color: #333; color: #fff; height: 50px; text-align: center; }

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

.body { background-color: #fff; flex-grow: 1; margin-left: 100px; margin-right: 100px; margin-top: 50px; margin-bottom: 50px; }

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

.footer { background-color: #333; color: #fff; height: 50px; text-align: center; margin-top: auto; }