Introduction to CSS methods for fixing the bottom of the page (with code)

This article brings you an introduction to the method of fixing the bottom of the page with CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When we write a page, we often encounter that when the page content is small, the footer will poke in the middle of the page or something? Anyway, it is not displayed at the bottom. It is ugly anyway. The layout to be discussed below is to solve how to make the elements stick to the bottom of the browser.

Method 1: Fixed footer height and absolute positioning

html

<div>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>

CSS

.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

Method 2: Add a negative value to the bottom margin on the main content equal to the bottom height

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}

Method 3: Set the margin-top of the footer to a negative number

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

Method 4: By setting flex, set the margin-top of the footer to auto

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}

Method five: Calculate the height of the content through the function calc()

html code

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS code

main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}

Method six: By setting flexbox, set the main body to flex

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS code

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}

Method 7: Use grid layout

Html code

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS code

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}

Method 8: display-*

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body {
  min-height: 100%;
  display: table;
  width: 100%;
}
main {
  display: table-row;
  height: 100%;
}

The above is the detailed content of Introduction to CSS methods for fixing the bottom of the page (with code). For more information, please follow other related articles on the PHP Chinese website!