There are 6 fixed methods at the bottom of CSS page, are you sure you don't want to learn?

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

Here I recommend my front-end learning and exchange group: 731771211, which is the learning front-end learning materials from the most basic HTML+CSS+JS [cool special effects, games, plug-in packaging, design mode] to the mobile HTML5 project practice, which are sorted out and sent to each front-end small partner. Update technology from time to time to keep pace with the needs of enterprises. Friends are communicating in it. Daniel will explain the front-end technology regularly every day!

Click: join

Tags: Web Development Mobile html5

Posted on Sun, 01 Dec 2019 16:08:01 -0800 by silas101