描述一下，對於頁面，
内容少得不足以产生滚动条的时候，footer落在最底部面， 当内容变多，页面产生滚动条时，footer要处于内容的最后，即滚动到最底部才能看见
我知道一種是使用 負值margin-top 和 正值padding-bottom 的方法，但是感覺不夠靈活..
請問有沒有什麼好的實作方法？
#這是我答案：純css因為我主要用在行動端 應該可以相容....https://jsfiddle.net/BoomBang...
這種東西就在於思路：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <title></title> </head> <body> <style> body{ margin: 0; } html, body, .wrap { height: 100%; } .content { min-height: 100%; } footer { height:50px; background-color: #0cc; margin-top: -50px; } </style> <p class="wrap"> <p class="content"> <p>内容区域</p> </p> <footer> 底部 </footer> </p> </body> </html>
效果圖：
不考慮相容舊的IE：flex 版面 + wrapper最小高度為視口/視窗高度。
要相容老的IE：
上Javascript；
固定尺寸的CSS trick。
為內容區域設定 min-height 属性，让其有一个最小高度，其值可以是固定的（如：1280px），亦可以通过 js 来动态设置（如：$('.content').css('min-height', window.innerHeight)），這樣，內容較少時，內容區域會撐滿整個窗口，而 footer 結構會出現在屏幕以外（下，滾動可見）；
min-height
$('.content').css('min-height', window.innerHeight)
這種東西就在於思路：
效果圖：
不考慮相容舊的IE：
flex 版面 + wrapper最小高度為視口/視窗高度。
要相容老的IE：
上Javascript；
固定尺寸的CSS trick。
為內容區域設定
min-height属性，让其有一个最小高度，其值可以是固定的（如：1280px），亦可以通过 js 来动态设置（如：$('.content').css('min-height', window.innerHeight)），這樣，內容較少時，內容區域會撐滿整個窗口，而 footer 結構會出現在屏幕以外（下，滾動可見）；