jquerymobile header导航和footer底部固定

来源：互联网发布：启辰网络编辑：程序博客网时间：2024/05/17 07:35

增加data-position="fixed" data-tap-toggle="false"即可。

<!doctype html><html><head><meta charset="utf-8"><title>data-role="page"</title><meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/><script src="jqm/jquery-1.8.2.min.js"></script><script src="jqm/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page"><div data-role="header" data-position="fixed" data-tap-toggle="false"><h1>Home</h1><div data-role="navbar"><ul><li><a href="a.html" class="ui-btn-active">Home</a></li><li><a href="b.html" >Credits</a></li><li><a href="c.html" >Contact</a></li></ul></div></div><div data-role="content"><p>This is the Home Page</p></div><div data-role="footer" data-position="fixed" data-id="footernav" data-position="fixed" data-tap-toggle="false"><div data-role="navbar"><ul><li><a href="a.html" class="ui-btn-active">Home</a></li><li><a href="b.html" >Credits</a></li><li><a href="c.html" >Contact</a></li></ul></div></div></div></body></html>