How to control the div to be fixed at the bottom of the webpage with CSS:
You may need such an effect in web design, that is, placing a banner at the bottom of the webpage , and can pass through this banner when the web page is scrolled.
The code examples are as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">html, body { padding:0px; margin:0px; height:100%}#main { height:100%; width:100%; overflow:auto;}.neirong { height:1000px; width:20px; background-color:green; margin:0px auto;}#bottombar { position:absolute; width:100%; height:30px; line-height:30px; text-align:center; bottom:0px; background-color:#999; z-index:2;}</style></head><body><div id="main"> <div class="neirong">其实我很长，往下使劲拉吧</div></div><div id="bottombar">蚂蚁部落欢迎您！</div></body></html>The above code meets our needs. Here is a brief introduction to the implementation steps:
1. Absolutely position the bottom div and the main div, so that they will be separated from the document flow, and the two divs can cover each other.
2. Use the bottom attribute to position the bottom div at the top of the web page, then set its z-index attribute value to 2, and the z-index attribute value of the main div to 1 to ensure that the bottom div can be positioned above the main div.
3. Set the overflow attribute value of the main div to auto to ensure that the drop-down bar can be used to view hidden content when the height of the main div exceeds the display area.
Note: Although overflow:visible can also use the drop-down bar to view the excess content, the effect is different.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/942.html
The most original address is: http://www.softwhy.com/ forum.php?mod=viewthread&tid=4688
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
