使用css實現頁面頭部固定，下面隨著內容的增多滾動，但是頭部不動的效果
阿新 • • 發佈：2019-01-22
注意：下面這個地方的*{margin:0; padding:0}不要刪掉，會影響頁面整體顯示樣式
<!DOCTYPE html> <html> <head> <title>固定頭部檔案</title> <style type="text/css"> *{margin:0; padding:0} body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff} a{color:#528036; text-decoration:none} a:hover{color:#000; text-decoration:none} ul{list-style:none} h1{font-size:16px} .clear{clear:both} .top-head{ position:fixed; width:100%;height:auto; background:#ffc; overflow-y:auto;min-height: 60px;line-height: 60px; } .container{ padding-top: 60px; } </style> </head> <body> <!-- 頭部 --> <div class="top-head"> 我是頭部檔案的顯示的內容，隨著下邊檔案內容的增多，我是不會變得，我就固定在這個位置了 </div> <div class="container"> <ul> <li><a href="#">1啦啦啦啦啦</a></li> <li><a href="#">2啦啦啦啦啦</a></li> <li><a href="#">3啦啦啦啦啦</a></li> <li><a href="#">4啦啦啦啦啦</a></li> <li><a href="#">5啦啦啦啦啦</a></li> <li><a href="#">6啦啦啦啦啦</a></li> <li><a href="#">7啦啦啦啦啦</a></li> <li><a href="#">8啦啦啦啦啦</a></li> </ul> </div> </body> </html>