I have a situation where I use several sliders on the page due to which the actual height of the page changes
Let's say my html height is 600px but due to some sliders the actual page height is 1000px
And because of this, when I try to stick the footer to the bottom using position: absolute and bottom: 0, I have it placed at the end of the html height
I used an example to show how everything looks like for me
If I use position: relative then on other pages where the height is small, it will not be at the bottom
How can I stick the footer to the bottom of the page in this case?
I have also tried wrapping the entire html content in a class .wrapper { height: 100%; display: flex; flex-direction: column; } and for the footer use position: relative and margin-top: auto
This kind of helped, but then there were problems with the blocks that come after the html, they lost their width


html {
  height: 500px;
}

.main-content {
  padding: 200px;
  text-align: center;
}

.content {
  padding: 300px;
  text-align: center;
}

.footer {
  padding: 40px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: gray;
}
<html>
<div class="main-content"> MAIN CONTENT</div>
<div class="content">CONTENT</div>
<footer class="footer">FOOTER</footer>
</html>




stick footer to bottom if actual page height is greater than html height
You can use flexbox. Uncomment height property in body to see the changes.
Check the elements html, body, main and footer in the code below.
Resources: 
CSS Tricks | Flexbox 
CSS Tricks | Flexbox and Auto Margins 
Dev | Stick Footer to The Bottom of The Page


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /*height: 1000px;*/
}

header {
  height: 50px;
  background-color: cyan;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
  height: 70px;
  background-color: red;
}
<html>
  <body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
  </body>
</html>



