When we are writing a page, we often encounter that the content of the page is small, and the footer will be stuck in the middle of the page or what? Anyway, it is not displayed at the bottom, but it is very ugly. The following layout is to solve how to make elements stick to the bottom of the browser,

Method 1: footer height fixed + 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
}

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

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: set the margin top of the 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;
}

Method 5: calculate the height of content through the function calc()

html code

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

CSS

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

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

html

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

CSS

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

I'm a front-end Engineer for five years

Click: join