移动网站上的Html Css页脚

Question

我编码的网站会根据屏幕大小进行调整。唯一的问题是我现在编码的页脚非常混乱，当我在较小的设备上查看网站时，页脚会移到屏幕中间而不是位于底部。

这是代码，任何帮助将不胜感激：

CSS

#fcontain{
  width:100%;
  background:white;
  opacity:0.9;
  left:-0%;
  margin-top:6%;
  padding-left:30%;
  position: absolute;
}
 #footer .column {
 width: 100%;
 opacity: 1;
}
 #footer .column div{
 margin: 1%;
 height: 100%;
 background: white;
 opacity: 0.8;
 width: 20%;
 float: left;
 position:static;
}

HTML

<div id="fcontain">
<div id="footer">
    <div class="column">
        <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div>
        <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div>
        <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div>
    </div>
</div>

Answer 1

请勿在容器上使用pisition:absolute。页脚应该放在HTML文件的末尾，这就足够了。

一般评论：

1. 我相信你应该删除fcontain。页脚是 够了。
2. 使用<footer>代替<div id="footer">

Answer 2

如果您希望页脚始终位于屏幕底部，则应使用position: fixed;代替position: absolute;。

#fcontain {
    position: fixed;
    bottom: 0;
}

http://jsfiddle.net/b4vsLsjb/

Answer 3

您希望页脚始终位于底部，对吗？试试bottom: 0%或bottom: 0px。

让我知道它是否有效！