content
高度自適應問題,我很抗拒用js去解決,因為不好維護,也不夠自然,但是純用CSS,難度不小,比如下面我要說的例子。
需求:
1. 這個矩形的高度和瀏覽器視窗的高度相同,不能出現縱向捲軸
2. 綠色部分高度固定,例如50px
3. 紫色部分填入剩餘的高度
HTML結構暫且如下:
#先看1.
html, 身體 {
## 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;
# background-color: #999;
height: 100%;
}
#nav {
background-color: #85d989;
width: 100%;
height: 50px;
float: left;
}
#content {
# background-color: #cc85d9;
background-color: #cc85d9;height:100%;}這裡利用了浮動,最後的結果只是看著沒問題,當然了,如果你只是簡單的展示文字和圖片,這種方法已經夠用了,但是如果你想用js做點交互,比如#content內部有個需要拖曳的元素,它的top最小值肯定不能是0,否則就被#nav擋住了,悲劇的是我就有這種需求,於是繼續苦逼的試。 經過一天的嘗試,加上高人指點,終於有解了,淚奔啊#nav { background-color: #85d989;
width: 100%; height: 50px;} ## background-color: #cc85d9;
background-color: #cc85d9;
# background-color: #cc85d9;width: 100%; position: absolute;###### top: 50px;###### bottom: 0px;######o#o#Sft# ####}######重點是要top和bottom一起使用,這是很反常規的用法,可以強制定義盒子模型的區域,神奇啊###
以上是使用CSS解決高度自適應問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!