我正在使用JQuryMobile开发网页。下面是我的示例代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="main" class="ui-content">
<p>Insert Content Here</p>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
当我运行此代码时，我的页面并没有占据整个屏幕，而是产生了它所拥有的内容。我希望它占据/扩展整个屏幕，而不管其内容如何。
请让我知道上面代码中的操作方法。
首先不要使用data-role =“ main”，它是data-role =“ content”，还应该删除class =“ ui-content”，它会自动与data-role =“ content”一起添加。我并没有说出来，但是如果没有data-role =“ content”，某些jQuery Mobile功能将无法使用。
接下来，在更改页面尺寸之前，您需要了解jQuery Mobile页面的工作方式。页脚和页眉具有固定的高度值。另一方面，内容是可拉伸的，因此它将根据其内部内容调整大小，并且永远不会自动调整大小以占用剩余的可用空间（在页脚和页眉之后）。
有两个可用的解决方案，两个是您的问题，一个是基于CSS的，第二个是基于JavaScript的。
.ui-content {
padding: 0;
position: absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
由于页眉和页脚的原因，此处为40px，如果不需要它们，请将其设置为0。
工作示例：http : //jsfiddle.net/Gajotres/hJVuM/
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
工作示例：http : //jsfiddle.net/Gajotres/5Qu6P/
在这里更多地讨论这个话题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句