Footer needs to be bottom of the page and also below all the elements

Question

I made a footer element sticked to the bottom of the page. but, if there is excess elements present in the container. footer element overlaps the container. fiddle link attached here

<div>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        .....
</div>
<footer>
    <h1>Footer Content</h1>
</footer>

Here i have bunch of <p> tags, but footer element overlaps few of the p element.

I don't know what went wrong.

Answer 1

One way to solve this problem and worked for me right now it is by using flex with direction column and set the footer child align-self: end. Like this, you will guarantee nothing will overlap nothing.

Check this stack question Footer at bottom of page or content, whichever is lower. It will help you understand more.

*,
*:before, 
*:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
   height: 100%;
}

.container{
  display: flex;
  flex-direction: column;
   min-height: 100%;
}

.hello-wrapper{
  padding: 2rem 3rem;
}

footer{
  width: 100%;
  height: 100px;
  background-color: #444;
  color: white;
  padding: 20px;
  text-align: center;
  aligh-self: end;
}

<div class='container'>
<div class="hello-wrapper">
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        
    </div>
<footer>
    <h1>Footer Content</h1>
</footer>
</div>