这里先简易地写一个:(重在学习,现实中不怎么用这种)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .left { float: left; } .right { float: right; } .header { height: 48px; background-color: blue; color: white; } .content .menu { position: fixed; top: 48px; left: 0; bottom: 0; width: 200px; background-color: darkgray; } .content .content { position: fixed; top: 48px; right: 0; bottom: 0; left: 200px; background-color: palegreen; overflow: auto; } </style> </head> <body> <div class="header"></div> <div class="content"> <div class="menu left">a</div> <div class="content right"> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> <div class="footer"></div> </body> </html>
页面效果:
可以做到滑动时候右边的内容改变,左边的菜单固定在左边。