Home > Web Front-end > CSS Tutorial > Several ways to implement Footer at the bottom in CSS

Several ways to implement Footer at the bottom in CSS

php中世界最好的语言
Release: 2018-03-22 10:34:49
Original
2185 people have browsed it

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 class="wrapper">
    <!-- content -->
    <p class="push"></p>
</p>
<p class="footer">footer</p>
Copy after login
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}
Copy after login
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 class="content">
  <p class="content-inside">
    <!-- content -->
  </p>
</p>
<p class="footer">footer</p>
Copy after login
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;
}
Copy after login

Method 3: Use calc() to set the content height

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copy after login
Copy after login
Copy after login
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
Copy after login
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 class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copy after login
Copy after login
Copy after login
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
Copy after login

Method Five: Use Grid Grid Layout

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>
Copy after login
Copy after login
Copy after login
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
Copy after login
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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template