Sharing of five ways to implement Footer placement with CSS

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 footer will be placed at the bottom will remain at the bottom of the browser window.

Method 1: Set the <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a> 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 (p.push) in the container.

2. p.wrapper’s margin-bottom needs to be the same as p.footer’s -heightThe values ​​are the same, note that they are negative height.

Method 2: Set the <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a> of the footer to a negative number

• to Add a parent element outside the content, and make the <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a> of the content part 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()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 p.content There is a 20px gap between and p.footer, so 70px=50px+20px

Method 4: Use flexbox 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 5: 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 Sharing of five ways to implement Footer placement with CSS. For more information, please follow other related articles on the PHP Chinese website!