Question

编辑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%;
}`

Answer 1

如果您想要的是该图像总是位于屏幕的底部，那么您看起来似乎有点太复杂了。尝试：

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

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

您可以在配置中的#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和#footer div之外，并通过添加等于padding-top div上标题高度的#main值进行补偿。这是为了阻止#main div内的内容在#wrap和#footer div之外的标题顶部呈现。

无论屏幕大小如何，都将div / image强制显示在屏幕底部

1 个答案: