три div row layout cordova

Question

все, что я хочу (это должно быть) очень просто ... я просто хочу 3-строчный макет каждый скажем, 33,33% высоты и 100% ширины. Имейте в виду, что я использовал меню навигации слайдов (стиль facebook) все, что я тестировал, не подходит, я попытался сохранить первый и последний div (фиксированное положение) и абсолютное второе, но результат не то, что я хотел, так как DIV накладываются друг на друга, и последний остается больше, что другие ... мой HTML:

<div id="container"> 

    <!--The Hamburger Button in the Header--> 
    <header> 
     <div id="hamburger"> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
    </header> 

    <!--The mobile navigation Markup hidden via css--> 
    <nav> 
     <ul> 
      <li><a href="#">menuitem 1</a></li> 
      <li><a href="#">menuitem 2</a></li> 
      <li><a href="#">menuitem 3</a></li> 
      <li><a href="#">menuitem 4</a></li> 
      <li><a href="#">menuitem 5</a></li> 
      <li><a href="#">menuitem 6</a></li> 
     </ul> 
    </nav> 

    <!--The Layer that will be layed over the content 
    so that the content is unclickable while menu is shown--> 
    <div id="contentLayer"></div> 

    <!--The content of the site--> 


     <div id="c1" class="ctn1"> 

     </div> 
     <div id="c2" class="ctn2"> 

     </div>  
     <div id="c3" class="ctn3"> 

     </div>  

</div> 

мой CSS:

.ctn1{ 
    z-index: 0; 
    background:url(../img/tralicci.png); 
    background-size: cover; 
    width:100%; 
    height:37%; 
    position: fixed; 
    top:5%; 
} 
.ctn2{ 
    background:url(../img/paesaggio.png); 
    background-size: cover; 
    width:100%; 
    height:37%; 
    position:absolute; 
    margin-top: 50%; 
} 
.ctn3{ 
    background:url(../img/skyrim.png); 
    background-size: cover; 
    width:100%; 
    height:37%; 
    position: fixed; 
    bottom:0px; 
    content: ""; 
} 

результат должен быть отзывчивым (также держать в ум вращение устройства) спасибо

Answer 1

это достижение ли макет, который вы ищете:

http://codepen.io/anon/pen/XmpwNz

nav{ 
    position: absolute; 
    left: 0; 
    z-index: 5; 
} 

.ctn1{ 
    background: #333; 
    height:33.33%; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
.ctn2{ 
    background: #222; 
    height:33.33%; 
    top: 33.33%; 
    position:absolute; 
    width: 100%; 
} 
.ctn3{ 
    background: #111; 
    height:33.33%; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}