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

I got a sticky footer that is implemented with "Negative bottom margins" technique(does not use flex because need to support IE)

It works fine until I has some element like <h> or <p> in it then it renders with a annoying vertical scroll bar.

My temporal workaround is use <span> instead but the layout would be sightly different. What is the best solution here?

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>

I created a JSFiddle with your code and the fixes. Here's what I added:

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

https://jsfiddle.net/97hsqLav/

You had two main problems:

  1. The problem with the margins was caused by "Margin collapse". Basically start and end margins are summed with the parent's in some cases. Setting a padding of 1px resolves this (set it to top AND bottom to ensure both ways). The additional box-sizing is needed, so the height stays 100% (instead of 100% + 2px paddings)
  2. The text in the footer was higher than 30px, so the footer itself was a couple of pixels too tall (thus triggering the scrollbar). Overflow: hidden fixes this by cutting off everything that goes over 30px

Trying to understand negative margins - HTML-CSS, , unless and until you have made any error elsewhere. The Definitive Guide to Using Negative Margins 1. Setting the record straight. We all use margins in our CSS, but when it comes to negative margins, our relationship 2. Working with negative margins. Negative margins are very powerful when used correctly. There are 2 types of scenarios 3.

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

This is the issue you have limited the height of the footer to 30 pixels if you are entering text that exceeds 30px, the browser will automatically scroll it to show all content try increasing it to 60px.

What are your opinion on negative margin in CSS?, to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Negative margins in CSS It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Also, there is an exception we’ll get to in a minute.

Hope this will help you.

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

Negative margins in CSS, #mydiv1 {margin-bottom:-10px;}. If no width is applied, adding Negative Margins to its left/right pulls the element in both directions increasing its  Setting the bottom margin indicates what distance you want below the current block. Setting a negative top margin indicates that you want negative spacing above your block. Negative spacing may in itself be a confusing concept, but just the way positive top margin pushes content down, a negative top margin pulls content up.

How to avoid negative margins and fit width of element?, This is by far the most common use case for negative margins. You give a container Negative margins are the way to go. Like this: margin-bottom: 0; } body { Typically, negative margins are used to make visual adjustments, to manage workarounds for centering liquid designs in layout, or to offset specific elements outside the box in which they are contained (see Example 11-3).

The Definitive Guide to Using Negative Margins, Why is margin-top:-8px not the same as margin-bottom:8px ? So just how do negative margins work and what's the intuition behind them. How do  Definition and Usage. The margin-bottom property sets the bottom margin of an element. Note: Negative values are allowed. Default value: 0. Inherited: no. Animatable: yes, see individual properties.

Negative Margins, Before posting this, I reviewed the following discussions/websites on this topic: https://forum.freecodecamp.org/search?q=negative%20margin  Negative Margins. As you might suspect, while a positive margin value pushes other elements away, a negative margin will either pull the element itself in that direction, or pull other elements toward it. Here’s an example of a container with padding, and the header h2 has negative margins pulling itself through that padding back to the edges: