BFE.devでのAI解答例 - CSS 質問
20. sticky footer

.container { display: flex; flex-direction: column; min-height: 100vh; } .body { flex: 1; } .footer { margin-top: auto; }

/* Styling for demonstration purposes */ .header { background-color: #555; color: #fff; padding: 20px 10px; } .body { padding: 20px 10px; } .footer { background-color: #555; color: #fff; padding: 20px 10px; }

/* Explanation: By setting container's min-height to 100vh and using flexbox, we allow the body to expand to fit its content, while ensuring that the footer remains at the bottom of the screen if content is short. The "margin-top: auto" on the footer pushes it to the bottom of the container when there is extra space. */