Question

我正在使用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>

当我运行此代码时，我的页面不会占据整个屏幕，它会产生它所拥有的内容。我希望它占据/扩展整个屏幕，无论其内容如何。

请在上面的代码中告诉我如何操作。

Answer 1

首先不要使用 data-role =＆＃34; main＆＃34; ，它是 data-role =＆＃34; content＆＃34; ，您还应该删除 class =＆＃34; ui-content＆＃34; ，它会自动添加 data-role =＆＃34; content＆＃34; 。我没有告诉我这个，但是，如果没有 data-role =＆＃34;内容＆＃34; ，一些jQuery Mobile功能将无效。

接下来，在您更改页面维度之前，您需要了解jQuery Mobile页面的工作原理。页脚和页眉用固定的高度值固定。另一方面，内容是可伸缩的，因此它会根据内部内容调整大小，从不会自动调整大小以占用剩余的可用空间，从页脚和页眉后面留下。

有两个可用的解决方案，两个问题，一个是基于CSS的，另一个是基于JavaScript的。

CSS解决方案：

.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/

JavaScript解决方案

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/

详情了解此主题 here 。

Answer 2

HTML：

<div id="full-size">
  Your contents go here
</div>

CSS：

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */

只需对类名进行必要的更改，使其与您的类名兼容

如何使网页占据整个屏幕无法满足其内容大小

2 个答案:

CSS解决方案：

JavaScript解决方案

HTML：

CSS：