The simplicity of CSS lies in its ease of learning; the difficulty of CSS lies in finding better solutions. In the world of CSS, there seems to be no such thing as perfection. Therefore, the CSS introduced now is the absolute bottom, and it is just the most perfect solution among the solutions I have seen so far.
Let’s first talk about why we use this CSS bottom layout solution:
When making a page, if the page content is very small and is not enough to fill the window area of one screen, according to the ordinary layout, it will look like the picture below (that is, the bottom content is not located at the bottom of the window, but leaves a lot of blank.
This is unsightly to a designer looking for imperfection. There are some solutions on the Internet, but when changing the height of the window, the bottom and the main text overlap BUG. Although not many people would bother to change the window height, design is all about perfection.
Here is a relatively perfect method I found, which can be achieved by a foreign design expert using pure CSS: When the text content is small, the bottom is at the bottom of the window. There will be no overlapping issues when changing window height.
Even the person who created this CSS set up a website to introduce this CSS bottom layout solution. I don’t know if he applied for a patent :)
HTML code:
Note: The prerequisite for using this layout is that the footer must be outside the general div container. The footer uses a layer, and all other content uses a general layer. If you really need to add other sibling layers, then this sibling layer must use position:absolute for absolute positioning.