當頁面沒有內容時，粘滯的頁腳

所以我想這已經有很多話題了，如果這是一個重複的話，我很抱歉。那時我找不到它。當頁面沒有內容時，粘滯的頁腳

我很忙於基於Ionic框架進行測試的角度應用程序。現在我想要完成的是一個頁腳，它會始終堅持頁面的底部。由於某種原因，它不會。

這是發生了什麼（橙色條應作爲腳註。）：

而我一直試圖實現是非常相似的Ryanfait的stickyfooter的解決方案。

我的CSS：

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.page-wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -150px; 
} 
.page-wrap:after { 
    content: ""; 
    display: block; 
    height: 150px; 
} 

#mainView #footer { 
    height: 150px; 
    background: orange; 
}

然後我的HTML：

<div class="page-wrap"> 
     <div id="logo-ionic"> 
      <img src="img/ionic.png" /> 
     </div> 
    </div> 

    <div id="footer"> 
     <!-- Footer content blablabla --> 
    </div>

我承認，我寧可不使用這個JavaScript解決方案。

感謝（：

來源

2015-11-01 Wesley Peeters

考慮您的Ionic需要你爲什麼不使用有<ion-footer-bar></ion-footer-bar>指令。

Here看一看這個..

來源

2015-11-01 10:32:54

大多數CSS解決這個問題的目的是滿足幾個目標：

他們應該有固定寬度的側邊欄流體中心中心柱（主要內容）應該出現第一個在HTML源文件中所有的列應該是相同的高度，不管哪一列實際上是最高的它們應該只需要最小的標記當內容稀疏時，頁腳應該「粘」到頁面的底部

看https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

二：解決方案列表

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ 
http://www.cssplay.co.uk/layouts/fixit.html 
http://jsfiddle.net/jgmoy4a3/ 
http://codepen.io/VinSpee/pen/zxBJVO

來源

2015-11-01 10:29:57 Shohel

當頁面沒有內容時，粘滯的頁腳

回答

相關問題