記事の説明 2024.04.24
HTMLとCSSの詳細
min-height: 100vh;
これにより、verti-contents-wrap
要素が少なくともビューポートの高さ(ブラウザウィンドウの高さ)と同じになります。
flex: 1;
を .verti-contents
に適用することで、この要素が利用可能な追加スペースを全て埋めるようになります。これにより、記事の数が少なくてもフッターが下部に固定されます。
margin-top: auto;
を footer
に適用すると、その要素の上のマージンが自動的に最大化され、フッターがコンテナの底に押し出されます。