仅使用 CSS，是否可以将页脚放置在页面底部但对移动设备不“粘”？答案

【问题标题】：Using CSS only, can a footer be placed at bottom of page but is not "sticky" for mobile devices?仅使用 CSS，是否可以将页脚放置在页面底部但对移动设备不“粘”？
【发布时间】：2014-06-16 17:52:38
【问题描述】：

如果要在支持 CSS2.1 和大多数 CSS3 的移动设备上放置页脚（例如，如果它是 iPhone 4 或 iPhone 5S 上的 Chrome 或 Safari），那么该页脚是否可以放置在页面，并且不粘，不使用任何 JavaScript？

重要的一点是，我们不希望有很大的空间区域，并要求用户向下滑动才能看到页脚，因为用户可以声称他们从来不知道有页脚由于页面底部显示的空间，它似乎已经是页面的结尾（因此他们从未看到法律问题的免责声明等）。

例如，如果我们为 iPhone 4 设置样式：

如果你想在 jsfiddle 中使用它：http://jsfiddle.net/Ne679/1

一切看起来都不错，页脚上方的区域使用 CSS min-height 或 400px。

但是，此页面在 iPhone 5S 上的显示为：

所以页面底部附近有额外的空间。我们可以肯定地使用 CSS position: fixed; bottom: 0 将它放在 iPhone 4S 和 iPhone 5 的页面底部，但是如果主要内容实际上超出了页脚底部，这不是期望的行为。

所以不使用 JavaScript，

是否有已知的设计模式可以使这项工作发挥作用？（在响应式网页设计中）
是否真的可以通过使用媒体查询，根据高度设置相应的样式？但是我们不是必须为每个 iPhone 4、iPhone 5S 设置一个样式，如果屏幕高度不同，比如720px 或其他什么，那么我们必须再次使用媒体查询来设置样式可能的屏幕的每个高度？这可能很麻烦。
即使上面的（2）可以工作，如果页面可以动态增长高度，或者如果某些数据来自数据库，我们永远不知道页面的顶部是否会变短或可以这么长以至于超出了屏幕底部，这种情况下我们自然想在内容结束后贴上页脚，那我们怎么能只使用CSS而不使用JavaScript呢？
当我们为上面的 iPhone 4 设计样式时会出现复杂情况，因为如果某些智能手机具有不同的高度，或者即使 iPhone 4 处于横向模式，那么高度不会那么高 - 然后我们展示顶部和页脚不可见，用户可以声称他们从未见过页脚。

如果使用JavaScript，那我觉得解决方法可以很简单：就是不要使用min-height，而是让页脚在主要内容之后自然显示在页面上，并使用JavaScript说，如果底部Y坐标页脚的坐标没有到达视口的底部Y 坐标，然后只需移动页脚，使页脚的Y 坐标与视口相同。否则，就让页脚出现在主要内容之后。但我希望能找到一个没有 JavaScript 的纯 CSS 解决方案。

【问题讨论】：

确定添加到jsfiddle.net/Ne679/1

标签： html css responsive-design mobile-website mobilewebforms

【解决方案1】：

使用

position:absolute; 
bottom:0;

编辑：使父位置：相对和页脚为位置：绝对；您还需要在内容的底部边缘添加页脚的高度

Fiddle

【讨论】：

你是说position: absolute相对于身体吗？那么你必须制作正文height: 100% 和position: relative，我还不知道这是否可行...如果内容很长，那么100% 的正文就不够了...
但是如果内容真的很长，比如说，如果您多次粘贴Some log in form or registration form here. 行以使内容超出移动设备屏幕，该怎么办？我还不能让它工作
会检查更多。它使用 CSS min-height: Calc，所以它在 IE 8 上不受支持（部分在 IE 9 上），我想知道它在那里看起来如何
为避免使用 calc，您可以指定填充百分比而不是 16px。例如，如果您的顶部和底部填充为 2% 而不是 16px，则可以将 min-height:Calc(100% - 32px) 替换为 min-height:96%;

【解决方案2】：

如果我理解正确，如果您将页脚固定到位，实际内容的最后一点会被掩盖，因为页面将不再滚动？

将以下 CSS 添加到您的内容 div：

#myContentDiv {
    margin-bottom : 250px; /* should be equal to the footer's height! I prefer slightly higher (looks nicer). */
}

这通过在内容后添加空格来确保您的文档“更长”。这应该允许您的页面滚动到可以完整查看内容的位置。

编辑

上述显然是不正确的（见下面的评论线程）。如果您想主动测量内容框的高度，据我所知，您将需要 javascript。

但是，可能有一种解决方法。不确定它是否对您有效。

将 3 个元素包装在一个容器中。澄清：

#container
   #header
   #content
   #footer

将#container 的min-height 设置为视口高度。这意味着它至少会覆盖整个屏幕，但如果你的内容很大，它可能会更大。

将#header 固定到容器的顶部边框。它会一直存在，如果你滚动它就会消失。

将#footer 固定在#container 的底部，而不是窗口。由于容器至少与屏幕一样大，这意味着您的页脚将位于页面底部或页面可见部分的下方（滚动之前）。

将您的#content div 设置为占用#header 和#footer 之间的任何剩余空间。如果您的内容很小，那么#content 和#footer 之间会有很多空白。如果#content 比屏幕大，#footer 会直接跟在#content 后面。

这是一个可接受的解决方案/解决方法吗？

Edit2如果你没有标题，同样的原则也适用:)

【讨论】：

不，要求页脚不能粘，因为页脚掩盖了有限屏幕的宝贵空间是不好的
we don't want to have a large region of space, and require the user to swipe down to see the footer => 这意味着页脚应该是可见的，而无需滚动。即，即使内容更长，它也被放置在可见的位置。
它应该首先显示，除非页面内容高于屏幕，在这种情况下它将在长内容之后显示。但是页脚永远不应该是粘性的
所以，基本上，它应该跟在内容块的末尾，而不是重叠？这就是它默认的工作方式（假设两者都是 div）。还是我在您的问题中遗漏了什么？如果是，我道歉。
如果内容只有 20px 高，那么页脚仍然需要靠近屏幕底部

【解决方案3】：

按照http://www.cssstickyfooter.com/using-sticky-footer-code.html 中所示的奇妙的纯 CSS 粘性页脚进行操作

这样格式化 HTML：

<div id="wrap">
    <div id="main"></div>
</div>

<p id="footer"></p>

将您的内容块包装在一个包装块中，并将页脚块分开。

并像这样添加 css：

html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 60px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -60px; /* negative value of footer height */
    height: 60px;
    clear:both;}

这是一个演示小提琴： http://jsfiddle.net/sunrays/8jkVj/

编辑：拼写

【讨论】：

只有在页面不需要滚动（即小内容）时才应该是粘性的。一旦它开始溢出，就应该去除粘性（OP在我的回答的评论线程中解释了它:)）
似乎在jsfiddle.net/8jkVj/1 和jsfiddle.net/8jkVj/2 中工作，但它需要为标记添加更多结构？我想也没有更简单的解决方案。我可能无法更改标记...希望只通过 CSS 来完成而不更改标记

【解决方案4】：

你可以试试vertical-align: bottom 或position: relative; bottom: 0

【讨论】：

不这么认为...vertical-align 用于内联或表格单元元素...而position: relative 也无法达到预期效果