Footer both fixed, and not covering content (without using explicit values)

Question

I'm pretty sure this will be (correctly) marked as a duplicate, because it's a very basic and newbie question, but I can't find the answer o.O

What I want is a fixed footer, so I do this:

HTML:

<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
</div>

<footer>
    <p>footer.</p>  
</footer>

Style:

.content {
    color:green;
}

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
}   

But this footer will "cover" my content, if the later is long enough. So I add 'margin-bottom:110px' to the .content, which ~equals to footer's height:

.content {
    margin-bottom: 110px;
}

And it "works". But I would like to avoid explicitly setting the .content's margin to any particular absolute value. Primarily because the footer's height varies from page to page.

Here is what I have now: https://jsfiddle.net/kpion/nmdsuca4/6/ clicking the "change footer size" shows what I mean.

Something like .content {margin-bottom: calc(footer.height + 10px)} would be exactly what I want, if it worked.

BTW, the javascript is there only to explain my issue, in reality I don't want to use javascript to achieve what I want.

BTW2: please bear in mind that I really want the footer to be fixed, i.e. always there, visible. So most solutions where we scroll down and then see it, is not what I need.

Answer 1

Use position: sticky for the footer instead of fixed

check this:

footer {
    background: red;
    opacity:0.4;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    margin-top: 10px;
}    

<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <div id = 'test1wrap'>
    Works fine, but: 
    <button id = 'test1'>
      Change footer size
  </button>     
  </div> 
</div>
<footer>
  That's a footer.
</footer>

Answer 2

You can achieve following way using Flex, no need any position used:

html,
body {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding:0;
  margin:0;
}
.content {
  background-color: blue;
  flex: 1;
  overflow:auto;
  text-align: center;
  padding:10px;
}
footer {
  text-align: center;
  background-color:red;
}

<div class='content'>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
  <p>content</p>
  <p>content</p>
  <p>More and more content 2018</p>
</div>

<footer>
    <p>Footer text<br /> Another Line</p>  
</footer>