I wrote an article a few months ago (as if yesterday) How to keep the footer at the bottom of the page gracefully Hydrology.
Using flex layout, the footer is always at the bottom of the container.
I used the grid layout when I was creating a page these days. It suddenly occurred to me that it seems easier to use the grid layout to implement sticky footers.
What is a Grid grid layout
Grid layout can divide a page into several main areas, and can define the size, location, hierarchy and other relationships of these areas.
Difference between Grid layout and Flex layout
Grid layout is similar to Flex layout to some extent, but there are also differences.
The flex layout can be seen as a single dimensional layout (along the horizontal or vertical direction), while the grid layout can be seen as a two-dimensional layout (along the horizontal and vertical direction).
Grid template rows and grid template columns properties
The grid template rows attribute defines the row height of each row of items in the grid layout, and the grid template columns attribute defines the column width of each column
In addition to absolute units, percentages can also be used
Fr unit
Fr (fraction) is a new length unit introduced in Grid layout. It represents a portion of the remaining space in the Grid layout.
For example, 1fr=100% of the remaining space, and. 25fr=25% of the remaining space.
When fr is greater than 1, the proportion will be recalculated for allocation.
Footer remains at the bottom of the page
The page is vertically divided into three parts: header, content and footer. No matter how much content there is, the footer is always at the bottom of the container
Paste code directly
<! doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled document</title> <style> * { margin: 0; padding: 0 } body { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; } </style> </head> <body> <header>header</header> <section>content</section> <footer>footer</footer> </body> </html>
Recommended reading about grid layout: Ruan Yifeng's CSS Grid Layout Tutorial
