这是一个常见的问题,代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ position: fixed; top:0; width: 100%; height: 30px; background-color: red; } .footer{ position: fixed; bottom: 0; width: 100%; height: 30px; background-color: red; } .main{ margin-top: 35px; min-height: 1000px; background-color: yellow; } </style> </head> <body> <div class="header">header</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>
为header使用position:fixed 让header相对于视口定位在顶部,由于fixed定位使其脱离文档流,所以下面的main会向上走,可以为main设置一个上外边距,使main的内容在靠下的位置,为了不使下面的内容滚动时覆盖header,可以给header一个z-index:999;