相對完美的CSS絕對底部

2024-07-11 08:44:21

字體：大中小

來源：轉載

供稿：網友

CSS的簡單在于它易學，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒有完美這種說法。所以，現在介紹的CSS絕對底部，只是目前個人見過的方案中比較完美的吧。
CSS的簡單在于它易學，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒有完美這種說法。所以，現在介紹的CSS絕對底部，只是目前個人見過的方案中比較完美的吧。
先說我們為什么會使用到這個CSS底部布局解決方案:
當做一個頁面時，如果頁面內容很少，不足于填充一屏的窗口區域，按普通的布局，就會出現下面圖片中的樣子(也就是底部內容并沒有位于窗口的底部，而留下了大量空白。

對于追未完美的設計師來說，這是不美觀的。網上有一些解決方案，但會出現當改變窗口高度時，底部和正文重疊的BUG。盡管沒有多少人會有事沒事兒的去改變窗口高度，但設計嘛，追求的就是盡善盡美。

下面是我找到的一個比較完美的方法，來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。

甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案。不知道他有沒有去申請專利:)
HTML代碼:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
說明: 使用這個布局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有內容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

上一篇：CSS初學福音:解決你對英文單詞的不理解

下一篇：CSS網頁布局使用表格可以嗎？