CODEWITHSUNDEEP
htmlcss
user12915445
user12915445

Reputation:

Put the footer at the end of a min-height page

So I have a page with a min-height of 200vh and I would like to place my footer at the end at the of the second section at 200vh but when I try to use the position: absolute;bottom: 0; it puts my code at the bottom of my first 100vh section, any advices? here is my snippet:

html,body
{
min-height: 200vh;
color: white;
text-align: center;
}

section
{
height: 100vh;
}

#first
{
 background-color: red;
}
   
#second
{
 background-color: black;
}

.is-bottom
{
position: absolute !important;
bottom: 0 !important;
}
<section id="first">
<!-- content -->
</section>

<section id="second">
  <footer class="is-bottom">
	<p>
      Hello, I'm a footer
	</p>
  </footer>
</section>

Upvotes: 0

Views: 92

Answers (1)

Alberto
Alberto

Reputation: 12939

You just need to give position: relative to your body element, or even better, to your #second section element, if you use position: absolute it tries to search a "parent" element with a position: relative in order to understand to which element your bottom: 0 is referring to.

Upvotes: 1

Related Questions