how to full height of Content in Jquery mobile

Question

I spent hours to find the solutions, but I can't.

I have simple apps, with jQuery mobile + Phonegap, I want to put a background image in CONTENT section,

This is my code.

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>

Try using `background-size: 100% 100%;` – Manish Patel Oct 23 '17 at 12:22 — Manish Patel, Oct 23 '17 at 12:22

score 0 · Answer 1 · answered Oct 23 '17 at 12:22

min-witdh:100%; is not 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>

thank you. it is mis type. but i have changed to correct one : min-width:100%, it is still not work — Def, Oct 23 '17 at 12:32
@Def : You mean this is not working in mobile and working in browser ? — Niklesh Raut, Oct 23 '17 at 12:45

score 0 · Answer 2 · answered Oct 24 '17 at 04:41

My proble is now fixed by using VH and VW in css

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

how to full height of Content in Jquery mobile

2 Answers2