How to fix the bottom content of CSS

This article mainly introduces the relevant knowledge of CSS how to fix the bottom content, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this CSS article on how to fix the bottom content. Let's take a look at it.

The principle of implementation:

We use flex-grow to control the expandable space of a flex element relative to its flex element of the same level, set its value to 1 or auto, and the content will automatically fill all the space except the head and bottom.

We also have to set flex-shrink:0 on the bottom of the footer to ensure that the size of the bottom footer is not affected.

Implementation code: how to fix the bottom of CSS-(yisu.com) * {margin: 0;} # document {height: 100vh; display: flex; flex-direction: column Background: # 202020;} nav, footer {background: # ccc; display: flex; justify-content: center;} main {color: # bdbdbd Flex: auto;} footer {flex-shrink: 0;} H2 nav p {padding: 15px;} nav > H2 {color: white } footer > H2 {color: white;} quality content

Content filling

The bottom content is about "how to fix the bottom content of CSS" this article is introduced here, thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to fix the bottom content of CSS". If you want to learn more, you are welcome to follow the industry information channel.