div高度自適應填充剩余部分

在樂學一百的開發過程中，遇到了一個小樂Fm開發，需要跟百度fm差不多，上邊一個條，下邊一個條，中間部分填充。但是還不能固定高度，因為屏幕的寬高都不一樣。。。
height:100%是不可行的。
搜了一圈，發現了一個比較好的解決方法，分享一下：
感謝作者：原文鏈接
高度自適應問題，我很抵觸用js去解決，因為不好維護，也不夠自然，但是純用CSS，難度不小，比如下面我要說的例子。

需求：
1. 這個矩形的高度和瀏覽器窗口的高度相同，不能出現縱向滾動條
2. 綠色部分高度固定，比如50px
3. 紫色部分填充剩余的高度

HTML結構暫且如下：

<div id="main"> <div id="nav">nav</div> <div id="content">content</div> </div> 

先看1.

html, body { height: 100%; margin: 0px; padding: 0px; }
#main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">999; height: 100%; } 

需求2 也很容易：

#nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; height: 50px; } 

 

 

需求3 是最讓人頭痛的，一般我們都會想到height:100%， 但是100%是以父元素的高度為准的，比如父元素的高度是300px，#nav占去了50px，#content理應是250px，但是寫成height: 100%，結果就是#content的高度也變成了300%，出現了需求不允許的縱向滾動條。

當然，用js解決這種問題是相當簡單的，但是這次我就是不想用js，下面就來試吧：

這個需求真的讓我非常崩潰，看似簡單，換了n種方式都覺得不靠譜，最后找到一種最接近理想效果的方法，如下

html, body { height: 100%; margin: 0px; padding: 0px; }

 #main { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">999; height: 100%; }

 #nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; width: 100%; height: 50px; float: left; }

 #content { background-color: #cc85d9; height:100%; } 

這里利用了浮動，最后的結果僅僅是看着沒問題，當然了，如果你只是簡單的展示文本和圖片，這種方法已經夠用了，但是如果你想用js做點交互，比如#content內部有個需要拖拽的元素，它的top最小值肯定不能是0，否則就被#nav擋住了，悲劇的是我就有這種需求，於是繼續苦逼的試。
經過一天的嘗試，加上高人指點，終於有解了，淚奔啊

#nav { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;">85d989; width: 100%; height: 50px; }

 #content { background-color: #cc85d9; width: 100%; position: absolute; top: 50px; bottom: 0px; left: 0px; } 

 

重點是要top和bottom一起使用，這是很反常規的用法，可以強制定義盒模型的區域，神奇啊