掃二維碼與項目經理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流
在進行網(wǎng)站建設的時候,不管是做普通的企業(yè)網(wǎng)站還是門戶類等幾乎任何類型的網(wǎng)站,我們經??赡苡羞@樣的一個需求,那就是我們要有一個邊欄,這個邊欄得有背景顏色,而且它的高度隨著內容的主體高度而變。就好像下圖這樣的:
這個看上去非常容易,當然實際上也是比較容易的;但往往大家在解決這個需求的時候要么忽略一些問題而導致可用性較差,要么就使用了雖然能解決,但不是特別極致的解決方案。
首先,我們要知道內容主體區(qū)域的高度是可變的(比如文章的內頁,高度可能隨著文章內容的多少而變化),如果給邊欄一個具體的高度值那,若這個高度值較小,那么遇到內容較多的時候,那么邊欄的下面就成了跟內容區(qū)域一樣的的背景(被留白了);反之,如果這個高度值設的足夠大,那對于大多數(shù)內容來講,下面會被留白太多,這樣顯然是要不得的。
除此之外,我們看到有很多網(wǎng)站使用到的兩種方法,一種是給邊欄和內容主體區(qū)域的父級標簽給個寬度等于邊欄的背景圖片;而另外一種則是用js來動態(tài)獲取內容高度然后又通過dom把這個值賦給邊欄。而且前者使用得最為普遍。
而實際上有一種方式,可以不實用js,也不實用背景圖片,維護起來特別方便。那就是采用position:?absolute;我們通常在使用絕對定位的時候一般是使用一個或者兩個值,用得較多的是兩個邊距值,比如這里我們用到了top:?0和left:?0。這樣實際上還是沒能達到我們的需求,邊欄還是只有邊欄本身內容“撐破”的高度。而實際上只要加上一個CSS屬性的值就可以實現(xiàn)我們的目標了,那就是加上bottom:?0,這樣我們的問題就解決了。
當然上面說的加這些東西只是針對上面效果的而言的,具體的需要根據(jù)實際變化;而且實際上可以通過這個實例得到很多其他的應用技巧;當然,針對這個也許還存在更好的方法。
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流