This time I will bring you several ways to implement Footer at the bottom in CSS. What are the precautions for implementing Footer at the bottom in CSS? The following is a practical case, let’s take a look.
Sticky footer means that the footer part of the web page is always at the bottom of the browser window. When the content of the web page is long enough to exceed the visual height of the browser, the footer will be pushed to the bottom of the web page along with the content; but if the content of the web page is not long enough, the bottom footer will remain in the browser bottom of window.Method 1: Set the margin-bottom of the content part to a negative number
<p> <!-- content --> </p><p></p> <p>footer</p>
html, body { margin: 0; padding: 0; height: 100%; } .wrapper { min-height: 100%; margin-bottom: -50px; /* 等于footer的高度 */ } .footer, .push { height: 50px; }1. This method requires additional placeholder elements (p.push) in the container. 2. The margin-bottom of p.wrapper needs to be the same as the -height value of p.footer. Note that it is a negative height.
Method 2: Set the margin-top of the footer to a negative number
Add a parent element outside the content, And make thepadding-bottom of the content part equal to the height of the footer.
<p> </p><p> <!-- content --> </p> <p>footer</p>
html, body { margin: 0; padding: 0; height: 100%; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; }
Method 3: Use calc() to set the content height
<p> <!-- content --> </p> <p>footer</p>
.content { min-height: calc(100vh - 70px); } .footer { height: 50px; }Assume here that there is 20px between p.content and p.footer Spacing, so 70px=50px+20px
Method 4: Use flexbox layout
The footer height of the above three methods is fixed Yes, if there is too much content in the footer, the layout may be destroyed.<p> <!-- content --> </p> <p>footer</p>
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; }
Method Five: Use Grid Grid Layout
<p> <!-- content --> </p> <p>footer</p>
html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; }I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website! Recommended reading:
React and CSS3 implement WeChat red envelope opening animation
Advanced usage of background-attachment in css
The above is the detailed content of Several ways to implement Footer at the bottom in CSS. For more information, please follow other related articles on the PHP Chinese website!

Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

It would surprise me if you'd never come across a ghost button ?. You know the ones: they have a transparent background that fills with a solid color

In this week's roundup, Safari takes on cross-site tracking, the delay between load and user interaction is greater on mobile, and a new survey says headings

There have been several excellent articles exploring how to use this API, including choices from authors such as Phil Hawksworth, Preethi, and Mateusz

In this week's roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox.

I woke up one morning and realized that I had it all wrong. I discovered that code and design are unable to solve every problem on a design systems team, even


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver CS6
Visual web development tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.