时间戳

首页 > 解决方案 > 负底边距“粘滞页脚”有烦人的垂直滚动条，如果涉及要素

html - 负底边距“粘滞页脚”有烦人的垂直滚动条，如果涉及要素

问题描述

我有一个用“负底部边距”技术实现的粘性页脚（不使用 flex，因为需要支持 IE）

它工作正常，直到我有一些类似<h>或其中<p>的元素，然后它呈现一个令人讨厌的垂直滚动条。

我的临时解决方法是<span>改用，但布局会明显不同。这里最好的解决方案是什么？

html,
body,
form {
  height: 100%;
  margin: 0;
}

.wrapper {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -30px;
}

.footer,
.push {
  height: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <form>
    <div class="wrapper">
      <h1>I am the header</h1><!--I needs to use span here-->
      <div class="push"></div>
    </div>
    <footer class="footer">
      <p>I am the footer</p><!--I needs to use span here-->
    </footer>
  </form>
</body>

</html>

标签： htmlcsssticky-footer

解决方案

   .footer,   
      .push {
   height: 30px;
}

这是您将页脚高度限制为 30 像素的问题，如果您输入的文本超过 30 像素，浏览器将自动滚动它以显示所有内容，尝试将其增加到 60 像素。

推荐阅读