Detailed explanation of eight methods to achieve CSS page bottom fixed

When we are writing a page, we often encounter a situation where the page content is small, and the footer will be stuck in the middle of the page or something? Anyway, it is not displayed at the bottom, and it is ugly. The layout to be discussed below is to solve how to make the element stick to the bottom of the browser.

Method 1: Fixed footer height + absolute positioning

html

<div class="dui-container">
<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
}

View the effect

Method 2: Add a negative value to the bottom margin of 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;
}

View the effect

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

View the effect

Method 4: Set the margin-top of footer to auto by setting flex

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

View the effect

Method 5: Calculate the height of the content using the calc() function

HTML code

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

CSS Code

main{
min-height: calc(100vh - 200px); /* This 200px is the height of the header and footer*/
}
header,footer{
height: 100px;
line-height: 100px;
}

View the effect

Method 6: Set the main body to flex by setting flexbox

html

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

CSS Code

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

View the effect

Method 7: Using 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;
}

View the effect

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

View the effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Use of MySQL truncate table statement

>>: HTML web page creation tutorial Use iframe tags carefully