Home > Article > Web Front-end > 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 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 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!