css - 移动网站上的 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">