滚动页面时如何阻止页脚移动？答案

【问题标题】：How to stop footer from mooving when scroll page?滚动页面时如何阻止页脚移动？
【发布时间】：2018-09-19 11:31:17
【问题描述】：

我正在学习 HTML 并且对布局有疑问。我正在尝试制作一个正常的页脚。我的意思是，它应该位于页面底部，并且在移动设备上滚动页面时不会移动。文本应放在页脚的中心。

我尝试使用position: fixed 属性解决它，但没有帮助。

请帮忙。

我的页面如下所示：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lorem ipsum</title>
  <link rel="stylesheet" type="text/css" href="/download/a/www/css/style_about.css">
</head>

<body>
  <div id="wrap">
    <div id="cont">
      <h1> Lorem </h1>
      <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
      <h3> Credits</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>
    </div>
  </div>
  <div class="credits">
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet <a href="">Lorem</a> Lorem ipsum dolor sit amet</p>
  </div>
  <br>
  <?php include(realpath(__DIR__) . '/footer-confident.php'); ?>
</body>

</html>

我在 Codepen 中显示的样式和 html 布局：https://codepen.io/h071/pen/rZoMbr

【问题讨论】：

position:fixed; 将元素“附加”到滚动条，您应该使用position:absolute 以防止它跟随滚动条
@IdontReallywolf 刚改成absolute，什么也没做。页脚现在出现在距页面顶部一定距离的位置。我应该做更多吗？
试试看css-tricks.com/couple-takes-sticky-footer和stackoverflow.com/questions/42294/…。有很多方法可以将页脚粘贴到页面底部。
修复并设置位置：position: absolute; bottom: 0px; left: 0px;
顺便说一句，您在关闭 @media 规则之前错过了 } .credits

标签： html css

【解决方案1】：

我认为您正在寻找的是移动设备页脚上的position: sticky。

body {
  margin: 0;
}

div {
  width: 100vw;
  min-height: 100vh;
  background: #c0ffee;
}

footer {
  width: 100vw;
  position: sticky;
  bottom: 0;
  text-align: center;
  background: #bada55;
}

<div class="content"></div>
<footer>Hi</footer>

【讨论】：

请记住，IE 不支持position: sticky。 edit : 看来 Safari 需要前缀 -webkit- 才能正常工作。
@Seblor 正确，虽然在移动设备上时它应该无关紧要，如果不支持，它只是回退到静态，这在大多数情况下也是可以的。
@Andifined 对不起，我已尝试根据您的回答纠正我的风格。有点困惑。您能否查看我更新的样式并告诉我我做错了什么？
您的 wrap 元素的宽度为 100vw 和边距。由于添加了边距，您会得到一个滚动条，如果这就是您所指的。另外你真的只需要position: sticky 和bottom: 0，其余的只是为了展示:)
@Andifined 不明白。 body 元素的边距设置为 0。wrap 元素的边距是左右（需要这个边距）。请记住，我应该怎么做才能解决我的问题：a）使页脚在底部保持静态和粘性，b）将此属性保留在小屏幕中。现在不幸的是它不是..

【解决方案2】：

将此添加到新答案中，以免混淆其他用户。

如果您希望页脚位于底部，无论内容长度（我希望这是您想要的），您都可以执行以下操作。主要内容将始终增长到至少填充视口高度并将页脚推到底部。

要对此进行测试，您可以将 body 上的 min-height 更改为 200vh 或其他值，它应该将页脚进一步向下推。

如果这也不是你想要完成的，我不知道你想要什么，对不起......

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
}

main {
  flex-grow: 1;
  background: #c0ffee;
}

footer {
  flex-shrink: 0;
  text-align: center;
  background: #bada55;
}

<main class="content"></main>
<footer>Hi</footer>

【讨论】：

【解决方案3】：

你可以试试 flexbox。使页面显示：flex 和主要内容 flex: 1，它强制内容增长并占用最大允许大小。如果你愿意，页脚可以有一个指定的静态高度，或者它的内容将决定它的高度。

看起来像这样：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1;
  overflow-y: scroll;
}

codepen example

【讨论】：