작성된 JQuery 페이지에 표시되는 내용은 여백이 없고, 내용이 브라우저 가장자리에 가까워서 특히 보기 흉합니다(아래 그림 참조).
코드는 다음과 같습니다:
다음과 같이 코드 코드를 복사합니다.
<본문>
<form id="form1" runat="서버">
<div data-role="페이지" id="페이지">
<div data-role="header" data-theme="b">
<h2>뉴스 콘텐츠</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="뉴스 이미지" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>케이터링 상담</h4>
</div>
</div>
</form>
</body>
사실 이유는 매우 간단합니다. 즉, 표시된 콘텐츠가 콘텐츠 내부에 배치되지 않으므로 div에 data-role="content"를 추가하면 됩니다. 수정된 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<본문>
<form id="form1" runat="서버">
<div data-role="페이지" id="페이지">
<div data-role="header" data-theme="b">
<h2>뉴스 콘텐츠</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="뉴스 이미지" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>케이터링 상담</h4>
</div>
</div>
</form>
</body>