Question

我已将我的页脚DIV修复到视口底部，如下所示：

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

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

如何让页脚粘贴到视口的底部，但从不重叠内容？

Answer 1

现代＆＃34;粘性页脚＆＃34;解决方案将使用flexbox。

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

首先，我们将身体设置为＆＃34; flex＆＃34;它的物品垂直，确保它的高度为100％。

然后我们在页脚元素上设置flex: 0 0 50px，这意味着：＆＃34;不要长大，不要缩小，高度为50px＆＃34;。实际上，我们可以完全省略flex属性，只需使用height:50px。

我们可以在display:flex之类的东西上设置<body>有点鲁莽，因为如果省略了flex容器的子级，其隐式值为flex: 0 1 auto（aka flex:initial），（几乎）相当于flex:none（这是简写 flex:0 0 auto）：

根据物品的宽度和高度属性调整物品大小。它收缩到最小尺寸以适应容器，但不会增长到吸收flex容器中的任何额外可用空间。（MDN）

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

来自规范（8.1. Aligning with auto margins）：

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

多说simply：

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

除此之外：＆＃34;正常＆＃34; flexbox布局方法可能是将ala <div id="main>...</div>的中间部分垂直地弯曲到100％，其中也会成为页脚＆＃34;坚持＆＃34;至底部。这种方法向我们展示了灵活的盒子模型实际上足够灵活，可以让我们调整/移动隔离元素。

＆＃13;

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  background-color: #efefef;
  flex: 0 0 50px;/*or just height:50px;*/
  margin-top: auto;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

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

position: static;

Answer 4

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

＆＃13;

<!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>

＆＃13;

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

Answer 5

就我而言，将底部边距设置为比页脚高度大一点效果很好。

arr=$(curl 'http://mypage/json' | jq'.[]')

防止固定页脚重叠内容

5 个答案: