Почему не прилипает футер к низу страиницы, при отдалении?он поднимается вверх

.content { 
  min-height: 100vh; 
  position: relative; 
  padding-bottom: 100px 
} 
.content .footer { 
  position: absolute; 
  width: 100%; 
  height: 100px; 
  text-align: center; 
  line-height: 100px; 
  bottom: 0; 
  left: 0; 
  background: #ccc 
}

<div class="content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id viverra lacus, eget sodales mauris. Suspendisse in enim eget est ultrices varius sit amet ac massa. Suspendisse non ligula ut felis vulputate placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec dolor varius, sodales ligula eget, rutrum neque. Integer a ultricies est, sit amet elementum erat. Sed posuere dui urna, vel volutpat leo posuere a. Aenean cursus finibus dui, at accumsan ex vulputate et. Aenean mi velit, ultrices at felis eget, ullamcorper efficitur odio. Nunc in dignissim risus. Cras non arcu nisi. Pellentesque fermentum erat quis tellus ultricies, facilisis malesuada odio mattis. Nulla facilisi. Aliquam ultricies mauris non felis volutpat semper.</p> 
 
<p>Curabitur egestas ligula vel augue ornare pulvinar. Donec velit felis, tempor vestibulum arcu id, varius posuere est. Duis bibendum elit porta nunc auctor tincidunt. Aenean metus elit, pharetra quis justo quis, dapibus ultrices massa. Curabitur nunc odio, tempor sit amet sodales nec, sollicitudin et erat. Etiam eu pellentesque nulla, eu facilisis enim. Donec bibendum consectetur mi, ac pharetra nulla. Quisque at urna aliquam, mollis ipsum sit amet, ultrices diam. Morbi lobortis felis vitae lorem interdum suscipit id malesuada leo. Donec blandit ipsum ac scelerisque dignissim. Sed feugiat iaculis dolor in tempus. Vivamus posuere ultrices ipsum a volutpat. Nam posuere, urna ut mattis ornare, turpis ipsum elementum massa, sit amet placerat lorem tellus ut mi.</p> 
  <div class="footer">FOOTER</div> 
</div>