三個div排佈置cordova

Question

我想要的全部都是（應該是）非常簡單......我只是想要一個3排佈局 每個我們都說33.33％的高度和100％的寬度。 請記住，我insered滑動導航菜單（Facebook風格） 所有我測試不適合，我tryied保持固定的第一個和最後一個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%; 
}