Sticky footers解決方案總結

在實際開發中，我們經常會遇到這樣乙個需求：如果頁面小於一屏時，頁尾塊需要固定在頁面底部，如果頁面超過一屏時，頁尾塊向下推送。

這種需求很常見，也很實用，下面總結了4種方法來實現這種需求：

當父級不要求使用fixed且footer塊高度已知時比較適用，主要設定container塊相對定位position:relative;footer塊為絕對定位position:absolute

class="container">

class="main">

正文內容

div>

class="footer">

底部內容

div>

div>

css樣式：

html,body

.container
.footer

內容大於一屏時，效果如下：

可以看到，不論內容小於一屏還是大於一屏，footer始終固定在底部。

製作彈出層時，就需要將父級設為fixed，此時就需要用到如下方式了

class="container">

class="main">
正文部分p>
正文部分p>
正文部分p>
div>
div>
class="footer">
xdiv>
div>css:
.container
.main
.footer

flexbox方式非常簡潔，不僅html結構簡單，而且footer塊高度未知也適用。

重點是將父級container的display設為flex，預設情況下子元素布局為row（即橫向布局），所以設定flex-direction: column;可將子元素（main和footer）設為縱向布局，然後將main塊設為flex:1;因為當flex>0時，元素就會靈活的控制自己的尺寸，來適配容器的剩餘空間

class="container">

class="main">
正文部分p>
正文部分p>
正文部分p>
div>
class="footer">
xdiv>
div>css:
.container
.main
.footer

重點是利用calc()函式來設定main塊的最小高度。其中100vh為螢幕可視高度，需要注意的是，運算子前後都需要保留乙個空格。

calc()用法詳解

class="container">

class="main">
正文部分p>
正文部分p>
正文部分p>
div>
class="footer">
xdiv>
div>css:
.container
.main
.footer

解決 SVN解決衝突

intelij idea 使用svn，提交 前先更新 此時如果有衝突，就會提示你解決衝突。產生衝突的情況 a 和 b 兩名程式設計師，分別更新了同一版本 version 1 的 同時修改了乙個檔案。a提交 後，伺服器中的 是 version a 即 a 修改後的 b隨後提交 由於伺服器中的 已經不是...

svn is already locked解決方案

蛋疼的問題，不是一次遇到了，每次遇到的原因都不一樣，從網上摘錄了一些資料，整理成文，svn是個不錯的東東。svn already locked 解決辦法 在出錯資料夾下，滑鼠右鍵tortoisesvn clean up.svn錯誤 attempted to lock an already locke...

Bad for loop variable解決方法

錯誤為syntax error bad for loop variable 解決辦法 sudo dpkg reconfigure dash 在選擇項中選no 從 ubuntu 6.10 開始，ubuntu 就將先前預設的bash shell 更換成了dash shell 其表現為 bin sh 鏈結...