製作#div（％）填充包裝div的其餘部分

Question

使用全頁（「鎖定」）設計。

這裏就是我的工作： http://jsfiddle.net/5yex5nfu/

<div id="wrapper"> 
    <div id="navigation"> 
     Nav 
    </div> 
    <div id="main"> 
     Main 
    </div> 
    <div id="footer"> 
     Footer 
    </div> 
</div> 

body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
} 

#wrapper { 
    display: block; 
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin-top:50px; 
    margin-bottom:50px; 
    margin-right:50px; 
    margin-left:50px; 
    background-color: lightblue; 
} 

#navigation, #footer { 
    width: 100%; 
    height: 70px; 
    background: pink; 
} 

#main { 
    height: auto; 
    background: lightgreen; 
} 

我想主要的div填寫的「鎖定」剩下的DIV，以％ - 值;而頁腳和導航哈德分配px值。

已經看到我的問題的一些解決方案，但他們都沒有工作。試圖爲每個div設置一個％值，它可以正常工作，但是和預期的一樣：整個事物會擴展和混亂佈局。

Answer 1

對於您可以使用計算，計算的主要

高度例http://jsfiddle.net/5yex5nfu/2/

剛剛從高度自動改變#main這個

#main { 
    height: calc(100% - 140px); 
} 

瞭解更多關於calc和純CSS解決方案a-couple-of-use-cases-for-calc

Answer 2

你可以使用只是css，與顯示器：表專有！

http://jsfiddle.net/Monteduro/5yex5nfu/5/

#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightblue; 
    display: table; 
    height: 100%; 
    width: 100%; 
    box-sizing: border-box; 
    padding:50px; 
} 

#navigation, #footer { 
    width: 100%; 
    height: 70px; 
    background: pink; 
    display:table-row; 
} 

#main { 
    height: auto; 
    background: lightgreen; 
    display:table-row; 
}