完美解决网页内容随浏览器自适应布局,底部始终在底部
一直为这个问题困惑,挺常见的问题
<!DOCTYPE html> <html> <head> <title></title> </head> <style> body,html{height: 100%;margin: 0;padding: 0;} .wrap{height: 100%;position: relative;overflow: hidden;} header{height: 50px;background: #ccc;overflow: hidden} section{background:#9acd32;height:100%; padding-bottom:100000px;margin-bottom:-100000px; border-top: 1px solid #666;border-bottom:1px solid #666;overflow: hidden; } footer{height: 50px;background: blue;width:100%;position: absolute;bottom: 0;} </style> <body> <div class="wrap"> <header>this is header</header> <section>this is body</section> <footer>copy right</footer> </div> </body> </html>