我正在开发一个具有侧面导航窗格的应用程序,其中我在某些页面上遇到问题内容错位,而不是全部
内容滑动下方
内容适当
代码 这是导航代码
<label class='side-menu-overlay active' for="sideMenuHandler"></label>
<div class='side-menu'>
<ul class="sideMenuList" style="-webkit-padding-start: 0px;">
<li class="menuList" id="about" onclick="loadPage1('About Calendar')"><label class="textStyle"
for="sideMenuHandler">About Calendar</label></li>
<!-- <li class="menuList" id="email"><label class="textStyle"
for="sideMenuHandler" onclick="loadPage2('Email us')">Email
Us!</label></li>
<li class="menuList" id="share"><label class="textStyle"
for="sideMenuHandler" onclick="loadPage3('Share App')">Share
the app!</a>
</label></li>
<li class="menuList" id="share"><label class="textStyle"
for="sideMenuHandler" onclick="loadPage4('Rate')">Rate the
app!</a>
</label>
</li> -->
<li class="menuList" id="home" onclick="loadPage5('Calendar')"><label class="textStyle"
for="sideMenuHandler">Home!</a>
</label></li>
</ul>
</div>
主要部分代码
在此“appcontent”部分被 ajax 擦除并放置 aboutus 内容
<input type="checkbox" class="side-menu-handler" id="sideMenuHandler">
<div class="main">
<div class="top-bar">
<label class="list-btn" id="menuButton" for="sideMenuHandler">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="appName">Calendar</div>
</label>
</div>
<div class="appContent">
<div data-role="content" id="calendarPart">
<div id="calendar">
<div data-role="header" data-position="fixed">
<!-- <h1>Single-page application</h1> -->
</div>
<!-- <p>This is a single page boilerplate template that you can copy
to build your first Tizen Web UI Framework page.</p> -->
<iframe style="width:75px;height:43px; border:none;position: absolute;top:85px;right:0;" src="http://dev.skyle.co/zen/a.html"></iframe>
<div class="tabs">
<ul class="tab-links">
<li id="2013Year" class="active"><a href="#tab1">2013</a></li>
<li id="2014Year"><a href="">2014</a></li>
<li id="2015Year"><a href="">2015</a></li>
<!-- <li><a href="#tab4">Tab #4</a></li> -->
</ul>
<div class="tab-content"
style="width: 100%; position: absolute; left: 1px; top: 49px; height: 352px;">
<div id="tab1" class="tab active" id="lyear">
<div class="container">
<div class="row">
<div class="g4">
<div id="eventCalendarInline"
style="position: absolute; left: 71px; top: 81px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于我们页面的代码
<div data-role="content" id="aboutPart">
<div>
<h2>About:</h2>
<p
style="text-align: justify; font-size: medium; font-family: Source Sans Pro; padding-left: 17px; padding-right: 17px;">
This app informs about the holidays and festivals in India. Festivals
in India carry important message and plays important role in
symbolizing the tradition and culture of India. This App provides
list of major Indian festivals grouped by months. This App includes
festivals and dates for 2013, 2014,2015 and 2016 (i.e. Previous year,
Current year and Upcoming two years). Users can plan their holidays
by using this app.</p>
<h2>Features:</h2>
<ul style="font-size: initial; font-family: Source Sans Pro; width: 83%;">
<li>Monthly calendar view with all Indian festival, dates of
holidays are highlighted.</li>
<li>The festivals are in list view on the bottom half of the
page, upon scrolling calendar goes up and festival list is shown in
full page.</li>
<li>Use navigation button to change the month. Traverse between
months to view festivals.</li>
<li>Menu is customized so that it can meet user expectations and
this app is user friendly.</li>
</ul>
</div>
请给出一些提示来解决这个问题
提前致谢