An introduction to five ways to implement Footer placement using CSS

This article mainly introduces the detailed explanation of five CSS methods to implement Footer bottoming. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to 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 class="wrapper">
    <!-- content -->
    <p class="push"></p>
</p>
<p class="footer">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 in the container (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 class="content">
  <p class="content-inside">
    <!-- content -->
  </p>
</p>
<p class="footer">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 class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

Assume here that there is a 20px gap between p.content and p.footer, so 70px=50px+20px

Method 4: Use flexbox elasticity Box layout

The footer height of the above three methods is fixed. If there is too much content in the footer, the layout may be destroyed.

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Method five: Use Grid grid layout

##

<p class="content">
  <!-- content -->
</p>
<p class="footer">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 An introduction to five ways to implement Footer placement using CSS. For more information, please follow other related articles on the PHP Chinese website!