【轉】CSS實現div的高度填滿剩餘空間

轉自：http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

高度自適應問題，我很抵觸用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 {
    background-color: #999;
    height: 100%;
} 

 

需求2 也很容易：

#nav {
    background-color: #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 {
    background-color: #999;
    height: 100%;
} 
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}

這裏利用了浮動，最後的結果僅僅是看着沒問題，固然了，若是你只是簡單的展現文本和圖片，這種方法已經夠用了，可是若是你想用js作點交互，好比#content內部有個須要拖拽的元素，它的top最小值確定不能是0，不然就被#nav擋住了，悲劇的是我就有這種需求，因而繼續苦逼的試。

 

通過一天的嘗試，加上高人指點，終於有解了，淚奔啊

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

 

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

 

地圖窗口常會遇到相似問題