Web Front-end
CSS Tutorial
CSS practical tutorial on fixing the footer to the bottom of the page
CSS practical tutorial on fixing the footer to the bottom of the page
This article mainly introduces the actual CSS practice of fixing the footer at the bottom of the page. Pay attention to the issue of CSS clearing floats. Friends in need can refer to
Footer position issues
The footer of a web page is where help links and copyright information are usually placed. The footer should naturally be located at the bottom of the page, but according to general practice, if the web page content before the footer is relatively small, or a monitor with a large vertical resolution is used, the footer may not appear to be on the page. The situation at the bottom is as shown below. 
Since the footer is basically a common part of all pages of a website, the amount of content on different pages varies, so it is indeed possible that some pages may not have enough content. Such a question. In addition, especially for footers that contain background colors, this problem will seriously affect the appearance.
So, we hope that the footer can be accurately located at the bottom regardless of the content of the web page.
How to fix the footer to the bottom
Is absolute positioning feasible?
Maybe someone has thought of setting the footer to position:fixed and then positioning it at the bottom. Regardless of IE6, which does not support this attribute value, in effect, if the content of the web page itself is sufficient, this way of writing will cause the footer to appear at the bottom of the browser from the beginning, and when scrolling the web page, the footer will appear at the bottom of the browser. will remain in its original position. This effect is obviously not suitable for most websites.
As you can imagine, the effect we need is:
When the web page has a lot of content, you can only see the bottom footer when you scroll to the bottom.
When the content of the web page is small, the footer is still located at the bottom of the entire page, and the rest is left blank.
Conventional, simple implementation method
CSS Sticky Footer provides a reasonable implementation method for fixing the footer at the bottom. However, on the one hand, this is an English site, and on the other hand, the writing method it provides can still be improved, so this article will refer to its content and give a reasonable implementation method.
First you need such an html structure:
<body>
<p class="wrapper">
<!--网页内容-->
<p class="footer_placeholder"></p>
</p>
<p class="footer">
<!--页脚-->
</p>
</body>p.wrapper is the outer container for all content in the web page except the footer, and the footer p.footer It's on the same level as it. p.footer_placeholder must be placed at the end of all content on the web page, that is, as the last child element of p.wrapper. Its function will be explained later.
Next write the css and explain it in turn.
html, body{height:100%;}When the content of the web page is insufficient, the actual height of the body and html may be smaller than the visible range of the browser, so write the height of 100% for the body and html. In addition, the following direct child elements will also use the percentage writing method. The percentage writing method must be effective only when the direct parent element has a certain height definition.
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}All web content is in this p.wrapper, and the minimum height is defined (IE6 uses a hack). Since the parent element of this element is the body that defines 100% height, no matter Regardless of the content, the height of the p.wrapper element will occupy the entire visible range of the browser. Then, set equal negative values for the bottom margin according to the height of the footer, so that the footer will appear exactly at the end of the page content.
.footer, .footer_placeholder{height:120px;} /*假定页脚的高度为120px*/p.footer_placeholder, as literally, the placeholder element of the footer, it is just an empty p, the definition height is the same as the footer, it exists to give the footer Leave a spot. Without it, something like this might happen ↓
At this point, the footer fixed at the bottom has been implemented. The sum of the css parts is:
html, body{height:100%;}
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
.footer, .footer_placeholder{height:120px;}
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：
body{margin:0;}
.footer_placeholder{clear:both;}The above is the detailed content of CSS practical tutorial on fixing the footer to the bottom of the page. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
