Home > Developer > JavaScript
Note some ways to keep footer at the bottom of the webpage. footer is at the bottom of the webpage.
Last time, the header and tail of the web page were separated as a separate file. All Web pages are shared, which makes it easier to modify. However ,,, I found that in some methods, the tail will keep behind the head and squeeze the content below .. In addition, if there are few page content, you cannot squeeze the tail to the bottom. So, this time we will study how to keep the tail below ..
Put the html code first:
<Body> <div class = "header"> content of the header </div> <div class = "content"> <br/> content <br/> <br/> same as above, N rows are omitted below... </Div> <div class = "footer"> tail </div> </body>
Method 1:In fact, this should always be at the bottom of the browser window, rather than at the bottom of the page, it is like a style with a line of prompt information under a browser that is not logged on or registered, which is probably the same as the back-to-top button ..
The previous figure is probably like this.
CSS code:
body{position:relative;height:100%;}.content{background-color: gray;padding-bottom: 100px;}.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}
You need to set a fixed height for footer.
Method 2:This is to make footer's method at the bottom of the webpage fix the footer height + absolute positioning
body{position:relative;height:100%;}.content{background-color: gray;padding-bottom: 100px;}.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}
Add padding-bottom to the content in the middle so that the content can be completely displayed without being overwritten by footer, and set a fixed height for footer.
Method 3:Fixed footer height + negative margin value
The html code is different:
<Body>
<Div class = "wrap">
<Div class = "header"> header </div>
<Div class = "content">
Content <br/>
Content <br/>
Content <br/>
Content <br/>
Same as above, N rows are omitted below...
</Div>
<Div class = "footer"> tail </div>
</Div>
</Body>
CSS code:
body{height: 100%;}.wrap{min-height: 100%;}.header{height: 100px;background-color: greenyellow;}.content{background-color: gray;padding-bottom: 100px;}.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}
Content: Add padding-bottom. Same as above.
Figure:
When the content is small:
When the content is large:
It's okay to test it on the webpage at the shared end.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
