首頁  >  文章  >  web前端  >  使用CSS解決高度自適應問題

使用CSS解決高度自適應問題

高洛峰
高洛峰原創
2017-03-27 18:09:141644瀏覽

高度自適應問題,我很抗拒用js去解決,因為不好維護,也不夠自然,但是純用CSS,難度不小,比如下面我要說的例子。

需求:

1. 這個矩形的高度和瀏覽器視窗的高度相同,不能出現縱向捲軸

2. 綠色部分高度固定,例如50px

3. 紫色部分填入剩餘的高度

HTML結構暫且如下:

   

   

content

#先看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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn