Five ways to use CSS to put Footer at the bottom

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 visible 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 at the bottom of the browser 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 space in the container Bit element (p.push).

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 let the padding of the content part -Bottom is 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 flexible box layout

The height of the footer in the above three methods is fixed. If the content of the footer Too much may break the layout.

<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;
}

                                                                 

The above is the detailed content of Five ways to use CSS to put Footer at the bottom. For more information, please follow other related articles on the PHP Chinese website!