sticky主要解决的问题 1、使用absolute和fixed中间区域需要定义高度2、使用absolute和fixed底部需要写padding-bottom 避免列表被遮挡住一部分（底部是浮窗的时候，需要动态的现实隐藏） <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.wrap{display: flex;flex-direction: column;}header{height: 100px;background-color: red;position: sticky;top:0;}ul{flex:1;}li{height: 100px;margin-bottom: 18px;background-color: pink;}footer{position: sticky;bottom: 0;height: 100px;background: blue;}</style> </head> <body><div class="wrap"><header>头部</header><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1444</li></ul><footer>底部</footer></div> </body> </html>
