我在 ASP.NET MVC 中使用了 kendo UI 移动版本来显示 iframe 中的更改。在我的 html 中，我有几个视图，其中我想要页眉、包含区域、页脚区域我需要在包含区域中的滚动条，我在每个视图中都使用了“”，它只在一个视图中工作，而不是在其他视图中，所以有什么问题吗？我错过了。
<div data-role="header" class="header-home3" >
<span class="headerContent1"> Opening Hours </span>
</div>
<div id="divLayout" data-role="scroller" class="scroller-content middle-home3">
<div id="divOpeningHoursPageBackgroundImage" class="inner-container">
<div id="divOpeningHoursheaderImg" class="inner-imgheader"> <img id="OpeningHoursHeaderImage" style="width:100%;"/></div>
<div id="divOpeningHoursHeaderText" class="inner-txtheader"></div>
<div class="inner-midcontainer">
<div id="divOpeningHoursContainer" style="height:80%;min-height:400px;position:static;"></div>
<div id="div5" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divOpeningHoursFooterText" class="inner-txtfooter" > </div>
<div id="divOpeningHoursFooterImg" class="inner-imgfooter"> <img id="OpeningHoursFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-share">
<div data-role="header" class="header-map3" >
<span class="headerContent1"> Map & Direction </span>
</div>
<div id="div1" data-role="scroller" class="scroller-content middle-home3">
<div id="divMapPageBackgroundImage" class="inner-container">
<div class="inner-imgheader"> <img id="MapHeaderImage" style="width:100%;"/></div>
<div id="divMapHeaderText" class="inner-txtheader"></div>
<div id="divMapContainer" class="inner-midcontainer">
<div id="divgooglemap" style="height:80%;min-height:400px;position:static;"></div>
<div id="divMapRoute" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divMapFooterText" class="inner-txtfooter" > </div>
<div class="inner-imgfooter"><img id="MapFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Twitter">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Twitter </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-History">
<div data-role="header" class="header-history3" >
<span class="headerContent1"> Contact Form</span>
</div>
<div id="divContactFormMain" data-role="scrollview" class="scroller-content middle-home3">
<div id="divContactFormPageBackgroundImage" class="inner-container">
<div id="divContactFormheaderImg" class="inner-imgheader"> <img id="ContactFormHeaderImage" style="width:100%;"/></div>
<div id="divContactFormHeaderText" class="inner-txtheader"></div>
<div id="divContactFormContainer" class="inner-midcontainer">
<div id="div6" style="height:80%;min-height:400px;">
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Name</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlName" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Address</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlAddress" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Country</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlCountry" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Email</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlEmail" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Phone</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlPhone" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;text-align:center;margin-top:20%;">
<input type="button" id="btnHtmlSaveContactForm" class="newButton" value="SAVE"/>
</div>
</div>
</div>
<div id="divContactFormFooterText" class="inner-txtfooter" > </div>
<div id="divContactFormFooterImg" class="inner-imgfooter"><img id="ContactFormFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-news">
<div data-role="header" class="header-news3" >
<span class="headerContent1"> News & Articles </span>
</div>
<div id="divNewsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divNewsPageBackgroundImage" class="inner-container">
<div id="divNewsheaderImg" class="inner-imgheader"> <img id="NewsHeaderImage" style="width:100%;"/></div>
<div id="divNewsHeaderText" class="inner-txtheader"></div>
<div id="divNewsContainer" class="inner-midcontainer">
This is News and Article Page
</div>
<div id="divNewsFooterText" class="inner-txtfooter" > </div>
<div id="divNewsFooterImg" class="inner-imgfooter"><img id="NewsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-About">
<div data-role="header" class="header-about3" >
<span class="headerContent1"> About Page</span>
</div>
<div id="divAboutMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divAboutPageBackgroundImage" class="inner-container">
<div id="divAboutHeaderImg" class="inner-imgheader"> <img id="AboutHeaderImage" style="width:100%;"/></div>
<div id="divAboutHeaderText" class="inner-txtheader"></div>
<div id="divAboutContainer" class="inner-midcontainer">
This Is About Page
</div>
<div id="divAboutFootertext" class="inner-txtfooter" > </div>
<div id="divAboutFooterImg" class="inner-imgfooter"><img id="AboutFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Events">
<div data-role="header" class="header-event3" >
<span class="headerContent1">Events</span>
</div>
<div id="divEventsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divEventsPageBackgroundImage" class="inner-container">
<div id="divEventsHeaderImg" class="inner-imgheader"> <img id="EventsHeaderImage" style="width:100%;"/></div>
<div id="divEventsHeaderText" class="inner-txtheader"></div>
<div id="divEventsContainer" class="inner-midcontainer">
This is Events Page
</div>
<div id="divEventsFooterText" class="inner-txtfooter" > </div>
<div id="divEventsFooterImg" class="inner-imgfooter"><img id="EventsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Team">
<div data-role="header" class="header-team3" >
<span class="headerContent1"> Team Member </span>
</div>
<div id="divTeamMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divTeamPageBackgroundImage" class="inner-container">
<div id="divTeamheaderImg" class="inner-imgheader"> <img id="TeamMembersHeaderImage" style="width:100%;"/></div>
<div id="divTeamHeaderText" class="inner-txtheader"></div>
<div id="divTeamContainer" class="inner-midcontainer">
<div id="div2" style="height:80%;min-height:400px;">
This is team member page
</div>
<div id="div3" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divTeamFooterText" class="inner-txtfooter" > </div>
<div id="divTeamFooterImg" class="inner-imgfooter"><img id="TeamMembersFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Contacts">
<div data-role="header" class="header-contact3" >
<span class="headerContent1"> Contact Details</span>
</div>
<div id="divContactDetailsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divContactDetailsPageBackgroundImage" class="inner-container">
<div id="divContactDetailsHeaderImg" class="inner-imgheader"> <img id="ContactDetailsHeaderImage" style="width:100%;"/></div>
<div id="divContactDetailsHeaderText" class="inner-txtheader"></div>
<div id="divContactDetailsContainer" class="inner-midcontainer">
This is contact details Page
</div>
<div id="divContactDetailsFooterText" class="inner-txtfooter" > </div>
<div id="divContactDetailsFooterImg" class="inner-imgfooter"><img id="ContactDetailsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Facebook">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Facebook </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-miles">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Milestones </span>
</div>
<div id="divMilestonesMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divMilestonesPageBackgroundImage" class="inner-container">
<div id="divMilestonesHeaderImg" class="inner-imgheader"> <img id="MilestoneHeaderImage" style="width:100%;"/></div>
<div id="divMilestonesHeaderText" class="inner-txtheader"></div>
<div id="divMilestonesContainer" class="inner-midcontainer">
this is Milestones page
</div>
<div id="divMilestonesFooterText" class="inner-txtfooter" > </div>
<div id="divMilestonesFooterImg" class="inner-imgfooter"><img id="MilestoneFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<!--3rd layout ends here-->
<script>
var subMenuVal = parent.document.getElementById("selectedSubMenu").value;
if ((subMenuVal == "") || (typeof subMenuVal === "undefined")) {
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
}
else {
console.log(subMenuVal);
var app = new kendo.mobile.Application(document.body, { transition: "slide", initial: subMenuVal });
}
</script>
</body>
提前致谢