关于page中header和content的问题

z100099 · 发表于 2015-3-4 10:41:46

我在index页面中的header标签中加入data-position="fixed"后首次刷新页面后，content中的内容会从屏幕顶端开始，导致被header中的内容覆盖；切换到其他Page后再回到index页面中，content中的内容又正常了从header后面开始显示，求大神指导如何才能让content始终从header后面开始显示并且header始终保持固定啊？非常感谢

代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>KmcfApp</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<link href="jqueryMobile/jquery.mobile-1.3.2.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/slick/slick.css">
<link rel="stylesheet" href="css/slick/slick-theme.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.2.js"></script>
<script src="js/slick/slick.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="index">
      <script src="js/index.js"></script>
      <div data-role="header" data-tap-toggle="false"
         data-position="fixed" data-theme="d">
         <div class="logoBg">
            <img class="logo" src="./images/logo.png" />
         </div>
      </div>
      <div data-role="content">
         <div class="imagesSlide">
            <div>
                  <img src="./images/slide/img1.png">
            </div>
            <div>
                  <img src="./images/slide/img2.png">
            </div>
            <div>
                  <img src="./images/slide/img3.png">
            </div>
         </div>
         <div class="gridMenu ui-grid-b">
            <div class="menuBlock ui-block-a">
                  <img src="./images/myAttention.png"> <span>我的关注</span>
            </div>
            <div class="menuBlock ui-block-b">
                  <img src="./images/intelligentException.png"> <span>智能异常</span>
            </div>
            <div class="menuBlock ui-block-c">
                  <img src="./images/artiException.png"> <span>人工异常</span>
            </div>
            <div class="menuBlock ui-block-a">
                  <img src="./images/postManagement.png"> <span>工位管理</span>
            </div>
            <div class="menuBlock ui-block-b">
                  <img src="./images/conferenceManagement.png"> <span>会议管理</span>
            </div>
            <div class="menuBlock ui-block-c">
                  <img src="./images/dataAnalysis.png"> <span>综合分析</span>
            </div>
            <div class="menuBlock ui-block-a">
                  <img src="./images/lifeService.png"> <span>生活服务</span>
            </div>
            <div class="menuBlock ui-block-b">
                  <img class="addIcon" src="./images/addMore.png">
            </div>
         </div>
      </div>
      <div data-role="footer" data-position="fixed" data-id="indexNav"
         data-tap-toggle="false" data-theme="d">
         <div data-role="navbar">
            <ul>
                  <li><a href="" id="toMainPage" data-icon="custom"
                     class="ui-btn-active ui-state-persist">首页</a></li>
                  <li><a href="./pages/myMessage.html" id="toMyMessage"
                     data-icon="custom">消息</a></li>
                  <li><a href="./pages/myInformation.html" id="toMyInformation"
                     data-icon="custom">我的</a></li>
            </ul>
         </div>
      </div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>

binxu1988 · 发表于 2015-5-26 15:02:35

未来属于html5 所以来学习phonegap开发

binxu1988 · 发表于 2015-5-26 15:14:51

收下，学习学习！！

		自动登录	找回密码
密码			立即注册

关于page中header和content的问题

站长推荐 /1