CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。
先說(shuō)我們?yōu)槭裁磿?huì)使用到這個(gè)CSS底部布局解決方案:
當(dāng)做一個(gè)頁(yè)面時(shí)，如果頁(yè)面內(nèi)容很少，不足于填充一屏的窗口區(qū)域，按普通的布局，就會(huì)出現(xiàn)下面圖片中的樣子(也就是底部?jī)?nèi)容并沒(méi)有位于窗口的底部，而留下了大量空白。
對(duì)于追未完美的設(shè)計(jì)師來(lái)說(shuō)，這是不美觀的。網(wǎng)上有一些解決方案，但會(huì)出現(xiàn)當(dāng)改變窗口高度時(shí)，底部和正文重疊的BUG。盡管沒(méi)有多少人會(huì)有事沒(méi)事兒的去改變窗口高度，但設(shè)計(jì)嘛，追求的就是盡善盡美。
下面是我找到的一個(gè)比較完美的方法，來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。
甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案。不知道他有沒(méi)有去申請(qǐng)專利:)
代碼寫(xiě)法
HTML代碼:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
&l
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式