如何在Jquery mobile中完整的Content内容

Question

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

我有简单的应用程序，使用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>

Answer 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>

Answer 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;
 }