移动网站上的 Html Css 页脚答案

【问题标题】：Html Css Footer on mobile website移动网站上的 Html Css 页脚
【发布时间】：2015-01-15 14:15:29
【问题描述】：

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

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

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>

【问题讨论】：

谷歌置顶页脚。另外，如果您想将页脚 div 居中，请将它们设为 display:inline-block 并在列上添加 text-align:center。使您免于将特定的左侧填充添加到#fcontain
我从#fcontain 中删除了左边的填充并将你所说的添加到css 文件中，但图像留在左边，是因为它在float:left 上吗？
啊是的 - 如果它们是 display:inline-block 则删除 float:left

标签： css html mobile footer

【解决方案1】：

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

一般说明：

我认为你应该删除 fcontain。页脚是够了。
使用<footer> 而不是<div id="footer">

【讨论】：

是的，我需要清理页脚的编码方式，很乱吧？啊哈

【解决方案2】：

如果您希望页脚始终位于屏幕底部，您应该使用position: fixed; 而不是position: absolute;。

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

http://jsfiddle.net/b4vsLsjb/

【讨论】：

有效，但唯一的问题是现在没有滚动条，只希望显示页脚的顶部几个像素，用户可以向下滚动以查看其余部分

【解决方案3】：

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

让我知道它是否有效！

【讨论】：