防止固定页脚重叠内容答案

【问题标题】：Preventing fixed footer from overlapping content防止固定页脚重叠内容
【发布时间】：2011-02-14 05:45:27
【问题描述】：

我已将页脚 DIV 固定到视口底部，如下所示：

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

如果页面上没有太多内容，这很有效。但是，如果内容填满页面的整个高度（即垂直滚动条可见），页脚会与内容重叠，我不会这样做。

如何让页脚贴在视口底部，但不与内容重叠？

【问题讨论】：

标签： html css

【解决方案1】：

尝试将您的位置属性设置为静态

position: static;

【讨论】：

这对我不起作用。在 Firefox 中使用 position: static 会使页脚从每个页面中消失。

【解决方案2】：

问题在于fixed 位置将其从文档流中移除。您可以将margin-bottom 添加到等于#Footer 的高度的正文内容中。这将确保页脚后面始终有一个与其高度相等的空白空间，防止它与内容重叠。

【讨论】：

这是一个非常复杂的解决方案，因为必须为所有屏幕执行此操作。

【解决方案3】：

现代的“粘性页脚”解决方案将使用flexbox。

tl;dr:：将容器（正文）设置为display:flex;flex-direction:column，将要向下移动的子项（页脚）设置为margin-top:auto。

首先，我们将主体设置为垂直“弯曲”其项目，确保其高度为 100%。

然后我们在footer元素上设置flex: 0 0 50px，意思是：“不增长，不缩小，高度为50px”。事实上，我们可以完全省略flex 属性而直接使用height:50px。

我们可以将display:flex 设置为<body> 本身有点鲁莽，因为如果省略，flex 容器的子项具有flex: 0 1 auto（又名flex:initial）的隐式值，这（几乎）相当于flex:none（是 flex:0 0 auto):

项目的大小根据其宽度和高度属性。它缩小到适合容器的最小尺寸，但不会增长到吸收 flex 容器中的任何额外可用空间。(MDN)

就粘性部分而言，是页脚上的margin-top:auto 为我们提供了我们想要的东西。应用于 flex 容器中，自动边距具有新的含义，而不是通常的“获得等量的可用空间”，它们的意思是“吸收所有可用的可用空间”。

来自规范 (8.1. Aligning with auto margins)：

在通过 justify-content 和 align-self 对齐之前，任何正面可用空间分配到该维度的自动边距。

多说simply:

如果您将自动边距应用于弹性项目，该项目将自动 扩展其指定的边距以占用 flex 中的额外空间 容器

另外：“正常”的 flexbox 布局方法可能是将中间部分 ala <div id="main>...</div> 垂直 100% 弯曲，这也会使页脚“粘”在底部。这种方法向我们展示了灵活的盒子模型实际上足够灵活，可以让我们调整大小/移动孤立的元素。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  background-color: #efefef;
  flex: 0 0 50px;/*or just height:50px;*/
  margin-top: auto;
}

<p>we've assumed only that there's random space-taking content above the footer...</p>

<p>lorem ipsum dolor flex...</p>
<div>
  <p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>

【讨论】：

最佳解决方案，也应该被接受

【解决方案4】：

这是我使用 jQuery 使用的另一种解决方案。要进行设置，您不需要编写太多代码，只需要 HTML。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your title</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Your Header</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p style="font-size: 300%;">
         Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
        Some text to enable scrolling... 
      </p>
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Your Footer</h1>
    </div>
  </div>
</body>

</html>

这是来自w3schools - fixed toolbars，但我认为它可能比其他一些答案更有用。

【讨论】：

【解决方案5】：

在我的例子中，将底部边距设置为比页脚高度大一点就可以了。

<main role="main">
    <div class="container" style="margin-bottom: 100px;"> 
        ...
    </div>
</main>

<footer id="sticky-footer">
   ...
</footer>

【讨论】：