div并没有占据整个空间

Question

I have this piece of code in which the div men are not occupying the entire height available.It may be a basic doubt but as I am a newbie plz help me JSFiddle http://jsfiddle.net/7U3aX/

        <div data-role="navbar">

            <ul>
                <li><a href="#men" data-ajax="false">Men</a></li>
                <li><a href="#women" data-ajax="false">Women</a></li>
                <li><a href="#kids" data-ajax="false">Kids</a></li>
            </ul>

        </div>

        <div id="men" style=" width:100%; height:100%; position:absolute"  >


            <div id="men_Promotion" style=" height:34%; background-color: green" >

            </div>
            <div id="men_Category" style=" height:33%; background-color: black" >

            </div>
            <div id="men_BrandPromo" style=" height:33%; background-color: blue"  >

            </div>

        </div>

Answer 1

Adding the following styles to the navbar div will do the job:

<div data-role="navbar" style=" z-index: 1; position: absolute; ">

fiddle? http://jsfiddle.net/7tGTw/

Answer 2

Take A look at DEMO

You need to add One More Css rule In your style.

 .ui-tabs{
            position:static;
        }