search
HomeWeb Front-endCSS TutorialSeveral ways to implement Footer at the bottom in CSS

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 the

padding-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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
A Color Picker for Product ImagesA Color Picker for Product ImagesApr 16, 2025 am 11:49 AM

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

A Dark Mode Toggle with React and ThemeProviderA Dark Mode Toggle with React and ThemeProviderApr 16, 2025 am 11:46 AM

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

Some Hands-On with the HTML Dialog ElementSome Hands-On with the HTML Dialog ElementApr 16, 2025 am 11:33 AM

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

Ghost Buttons with Directional Awareness in CSSGhost Buttons with Directional Awareness in CSSApr 16, 2025 am 11:32 AM

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

Weekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by HeadingsWeekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by HeadingsApr 16, 2025 am 11:30 AM

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

An Explanation of How the Intersection Observer WatchesAn Explanation of How the Intersection Observer WatchesApr 16, 2025 am 11:29 AM

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

Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in FirefoxWeekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in FirefoxApr 16, 2025 am 11:27 AM

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

A Codebase and a CommunityA Codebase and a CommunityApr 16, 2025 am 11:25 AM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MinGW - Minimalist GNU for Windows

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.