如果涉及 <h> 元素，则负底边距 "stickey footer" 会出现烦人的垂直滚动条

Question

我得到了一个用"Negative bottom margins"技术实现的粘性页脚（不使用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>

Answer 1

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

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

Answer 2

希望对您有所帮助。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body,form {
/*height: 100%;*/
margin: 0;
font-weight:normal;
}
.wrapper {
width:90%;
margin:0 auto;
}
.footer{
position:absolute;
width:90%;
bottom:0;
left:5%;
right:5%;
}
.innerFooter{
display:block;
}
</style>
</head>
<body>
<form>
<div class="wrapper">
<h1>I am the header</span> //I needs to use span here</h1>
<div class="push"></div>
<div>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</div>
</div>
<footer class="footer">
<div class="innerFooter">
<p>
<span>I am the footer</span>
<span>I needs to use span here</span>
</p> 
</div>

</footer>
</form>
</body>
</html>

Answer 3

我用你的代码和修复创建了一个 JSFiddle。这是我添加的内容：

.wrapper {
      padding: 1px 0;
      box-sizing: border-box;
}
 .footer,
 .push {
      height: 30px;
      overflow: hidden;
 }

https://jsfiddle.net/97hsqLav/

您有两个主要问题：

边距问题是由 "Margin collapse" 引起的。在某些情况下，基本上开始和结束边距与父级相加。设置 1px 的填充可以解决这个问题（将其设置为顶部和底部以确保两种方式）。需要额外的 box-sizing，所以高度保持 100%（而不是 100% + 2px 填充）
页脚中的文本高于 30 像素，因此页脚本身高了几个像素（因此触发了滚动条）。 Overflow: hidden 通过切断超过 30 像素的所有内容来解决此问题

如果涉及 <h> 元素，则负底边距 "stickey footer" 会出现烦人的垂直滚动条

Negative bottom margins "stickey footer" has annoying vertical scrollbar if <h> element involved

html

css

sticky-footer