无法在移动设备上保持页脚

Question

在移动设备上查看时，我在将页脚保持在页面底部时遇到问题。它目前看起来像这样 -

我按照this site（下面的代码）了解如何保持页脚，这可以在桌面上运行，但不能在移动设备上运行 -

 html,
 body {
margin:0;
padding:0;
height:100%;
 }
 #wrapper {
min-height:100%;
position:relative;
 }
 #header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom: 100px;
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
 }

这是JSfiddle。

我做错了什么？

Answer 1

请尝试以下操作，将footer保留在页面底部。

＆＃13;

＆＃13;

html {
  position: relative;
  min-height: 100%;
}
body {
  /* use margin-bottom from footer height */
  margin: 0 0 100px 0;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* set the footer height corresponding to the body margin-bottom */
  height: 100px;
  background-color: #f5f5f5;
}

＆＃13;

<div class="footer">
    Footer
</div>

＆＃13;

＆＃13;

＆＃13;