3

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

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

例如，如果我们为 iPhone 4 设计它：

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

在此处输入图像描述

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

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

在此处输入图像描述

所以在页面底部附近有额外的空间。我们当然可以使用 CSSposition: fixed; bottom: 0将其放置在 iPhone 4S 和 iPhone 5 的页面底部，但是如果主要内容实际上超出了底部的页脚，页脚会很粘，并且会覆盖页面的一部分，这不是期望的行为。

所以不使用 JavaScript，

  1. 是否有已知的设计模式可以完成这项工作？（在响应式网页设计中）

  2. 通过使用媒体查询，我们可以根据高度对其进行相应的样式设置，这是真的吗？但是我们不是必须为每个 iPhone 4、iPhone 5S 设置一个样式，如果屏幕高度不同，比如说720px什么，那么我们必须再次使用媒体查询来为每个高度设置样式可能的屏幕？这可能很麻烦。

  3. 即使上面的（2）可以工作，如果页面可以动态增加高度，或者如果某些数据来自数据库，我们永远不知道页面的顶部是否会很短，或者可能会长到超出屏幕底部，在这种情况下，我们自然希望在内容结束后粘贴页脚，那么我们如何只使用 CSS 而没有 JavaScript 呢？

  4. 当我们为上面的 iPhone 4 设置样式时会出现复杂情况，因为如果某些智能手机具有不同的高度，或者即使 iPhone 4 处于横向模式，那么高度不会那么高 - 然后我们显示顶部和页脚是不可见，用户可以声称他们从未见过页脚。

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

4

4 回答 4

1

按照http://www.cssstickyfooter.com/using-sticky-footer-code.html中所示的奇妙的 CSS only 粘页脚

像这样格式化 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/

编辑：拼写

于 2014-04-30T12:26:12.733 回答
1

利用

position:absolute; 
bottom:0;

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

小提琴

于 2014-04-30T12:11:49.027 回答
0

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

于 2014-04-30T12:07:58.857 回答
0

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

将以下 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如果您没有标题，则适用相同的原则:)

于 2014-04-30T12:10:51.820 回答