Question

我正在学习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

Answer 1

我认为您要寻找的是test()在移动设备的页脚上。

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

Answer 2

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

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

要对此进行测试，您可以将车身的最小高度更改为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>

Answer 3

您可以使用flexbox尝试一下。使页面显示：flex和主要内容flex：1，它强制内容增长并占用最大允许大小。如果需要，页脚可以具有指定的静态高度，否则其内容将确定其高度。

它看起来像这样：

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

codepen example

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

3 个答案: