0

I am trying to fill out the content section with a div that is 100% the of it but the height of the content section seems to be 0. I have tried numerous times to get it working but noting seems to work. My app relies on the profile_container taking up 100% of the available height as the items inside the profile_container are scaled as percentages of it.

Here is the HTML

<div data-theme="a" data-role="page" id="home">

   <div data-position="fixed" data-role="header">
     <h1>Game On</h1>
   </div>

   <div data-role="content" data-transition="slide"> 
     <div id="profile_container">
     </div> 
   </div>

    <div data-role="footer"  data-position="fixed"> 
     <div data-role="navbar" > 
        <ul > 
            <li><a href="#home" id="home" data-icon="home">Home</a></li> 
            <li><a href="#create" id="create" data-icon="plus">Create</a></li> 
            <li><a href="#events" id="events" data-icon="bullets">Events</a></li> 
            <li ><a href="#nearby" id="nearby" data-icon="search">Nearby</a></li> 
        </ul> 
     </div> <!-- /navbar -->
   </div>

</div>

Here is the CSS

#profile_container{
    height:100%;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}

And here is a picture of what is happening

enter image description here

Can anybody help me out?

Fiddle: http://jsfiddle.net/2K6r5/

user3036237
  • 33
  • 4

1 Answers1

0

Getting 100% height is done by adding :

html, body{height:100%;}
#profile_container{
    min-height:100%;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}

Edit:

Check the links for more information please.

height: 100% or min-height: 100% for html and body elements?

Fiddle

Community
  • 1
  • 1
ImAtWar
  • 1,073
  • 3
  • 11
  • 23