0

编辑 4 月 17 日上午 10 点 12 分。`你的 jsfiddle 和模拟器上的工作完美，正如我所料，但我没有运气。我的html是

<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%">
<div id="wrap">
<div id="main">
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png"  width="100%" /></a>
</div>
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" /></a>
</div>
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%" /></a>
</div>
</div>
</div>
<div id="footer"><a href="page/92/Self-Employment.asp"><img  src="images/mobile/m_tech_soundsgood.png" width="100%" /></a>
</div>

和 css 完全如您所说，但这不仅不会移动橙色页脚图像，而且还会与我的主页布局混淆:(

编辑：4 月 6 日下午 5:10

我找到了一个似乎可以正常工作的指南http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

橙色页脚在任何移动屏幕上都停留在底部，但是在最后一点内容和页脚之间仍然存在一些差距，这迫使我向下滚动，而在内容很少的页面上，页脚应该只是坐在那里已经。此外，本指南还弄乱了我的绿色条形图像，这些图像现在不再是 100% 宽 :(

这是我的代码：

<div id="container">
<div id="header"></div>
<div id="body">
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png" width="100%"></a></div>
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></a></div>
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%"></a></div>
</div>
<div id="footer"><a href="page/92/Self-Employment.asp"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></a></div>
</div>

和我的 CSS

`}
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:70px;   /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px;   /* Height of the footer */
content:url("../images/mobile/m_tech_soundsgood.png");
}
#container {
height:100%;
}`
4

1 回答 1

0

如果你想要的只是让该图像始终位于屏幕底部，那么看起来你让它有点太复杂了。尝试：

div#content
{
  position: fixed;
  bottom: 0px;
}

要使 CSS 粘性页脚起作用，您不能#wrap在#footerdiv 或 div 之外有任何内容，否则会弄乱高度计算。它会将#wrap具有min-heightof的 div 推100%到页面下方。这意味着#wrapdiv 的底部低于屏幕底部。导致行为不可靠。#wrap特别是如果 div或div之外的内容的高度#footer是可变的，这就是在这种特殊情况下发生的情况。

您可以#wrap在配置中的 div 内放置一个标题，如下所示：

<div id="wrap">
  <div id="header">
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Main content -->
  </div>
</div>
<div id="footer">
  <!-- Footer content -->
</div>

或者，您可以将其留在#wrap和div 之外，并通过在 div 上添加一个等于标题高度的值来进行#footer补偿。这是为了阻止 div 内的内容呈现在 div和div之外的标题顶部 。padding-top#main#main#wrap#footer

于 2013-04-15T10:34:29.333 回答