AI solution for CSS coding question on BFE.dev
20. sticky footer

To create a sticky footer, we can use the following CSS code:

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

Explanation:

• We set the container's display property to flex and its flex-direction to column so that the children elements (header, body, footer) are stacked vertically.
• We set the min-height of the container to 100vh (100% of the viewport height) so that the container takes up at least the entire viewport.
• We give the body element a flex value of 1 so that it takes up the remaining available space in the container. This ensures that the footer is pushed to the bottom of the container when the content is short.
• We add margin-top: auto to the footer so that it pushes itself to the bottom of the container when there is enough content to push it down. The auto value for margin-top will automatically adjust itself to push the footer down as far as possible without overflowing the container.