如何在Jquery mobile中实现内容的完整高度[重复]答案

【问题标题】：how to full height of Content in Jquery mobile [duplicate]如何在Jquery mobile中实现内容的完整高度[重复]
【发布时间】：2018-04-03 23:48:17
【问题描述】：

我花了几个小时寻找解决方案，但我找不到。

我有简单的应用程序，使用 jQuery mobile + Phonegap，我想在 CONTENT 部分放置背景图片，

这是我的代码。

html, body {
  height: 100%;
}
#mainn {
  height: 100%;
}
#mainn .ui-header {
  height: 40px;
}
#ctn {//CONTENT Style
  background:url(backimage.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-witdh:100%;
  min-height:100%;
}

<div data-role="page" id="mainn" data-position="fixed">
  <div data-role="header" data-tap-toggle="false" data-theme='b'>
    <a href='#sidebar' data-role="none" id="a-sidebar"><img src="images/menu-icon.png" alt="sidebar" id="header-menu-icon" /></a>
    <h1 class="header-title">My Aps</h1>
  </div>

  <div data-role="content" id="ctn">
  content
  </div>

  <div data-role="footer" data-position="fixed" ></div>

</div>

【问题讨论】：

尝试使用background-size: 100% 100%;

标签： jquery css jquery-mobile

【解决方案1】：

min-witdh:100%; 不是min-width:100%;

html, body {
    height : 100%;
}
#mainn {
    height : 100%;
}
#mainn .ui-header {
    height : 40px;
}
#ctn {
      background:url('https://i.stack.imgur.com/m8iXH.jpg?s=328&g=1') no-repeat center center fixed;
      //background-color:#ccc;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
       min-height:100%;
       min-width:100%;
 }

<div data-role="page" id="mainn" data-position="fixed">

<div data-role="header" data-tap-toggle="false" data-theme='b'>
<a href='#sidebar' data-role="none" id="a-sidebar"><img src="images/menu-icon.png" alt="sidebar" id="header-menu-icon" /></a>
                <h1 class="header-title">My Aps</h1>

            </div>

            <div data-role="content" id="ctn">
            content
            </div>

<div data-role="footer" data-position="fixed" ></div>

</div>

【讨论】：

谢谢。这是错误类型。但我已更改为更正一个：min-width:100%，它仍然不起作用
@Def ：你的意思是这不适用于移动设备和浏览器？
我在手机上使用，它不工作我的兄弟

【解决方案2】：

我的问题现在通过在 css 中使用 VH 和 VW 得到解决

#ctn {
      background:url(backimage.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
       background-size: 100% 100%;
       width:100vw;
       height:100vh;
       min-width:100vw;
       min-height:100vh;
 }

【讨论】：